Tables

For example, this was the table we made using the <pre> paired tags:

			Who "gets" the Web?

			Students      Faculty      Babies   Cats

Understand HTML	          60%          55%          5%         4%

Sort of get it		  30%          30%         10%         5%

Don't get it		   8%           5%         80%         21%

Chase mice		   2%          10%          5%         70%

It had the monospaced font and we had to carefully line up the elements of the table. Here's the same information using the <table> paired tags:

The markup for this table looks like this

Here is another example that will use tables as a page layout tool

The main tags used in creating a table are:

• <table> </table> This paired tag marks the beginning and end of the table. The default alignment for a table is to match the alignment of the text on the page. However, the opening table tag can take the attribute align, with two values: left or right, depending on whether you want the table on the left or right side of text on the page. Using this attribute causes the text to flow around the table

  So, to have text and a table aligned to the right, you would use the following markup:

  <table border="2" align="right">
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  </table>

  The table would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

  Here's the text that will run alongside the left border of the table that we have just created. Notice that the table is displayed along the right margin of the page, because of our use of the align attribute with the value of right

• <hspace>, <vspace> These are two attributes that you can use to create more space between a table and the adjoining text or image

  hspace adds pixels to the left and right of the table and vspace does the same to the top and bottom of the table

  Using the example above and increasing the space between the table and the text uses the hspace attribute in the following markup:

  <table border="2" align="right" hspace="30">
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  </table>

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

  Here's the text that will run alongside the left border of the table that we have just created. Notice that the table is displayed along the right margin of the page, because of our use of the align attribute with the value of right. The space between the text and the table is caused by the hspace attribute. To get the text to wrap around the table, it must be placed in the markup below the table it is intended to affect. Even though the hspace attribute has created a border around the left and right sides of the table, the text can still run below it because there is no vspace attribute used in the table markup. Understaning how to do thisw is important because it is a useful part of overall layout using text and tables.

  These attributes are part of the HTML 3.2 recommendation and are not carried over into HTML 4.01, which in turn means that they will be considered deprecated and not used in XHTML. Firefox does not recognize it while Netscape, Safari, and Internet Explorer do.

• <border="value"> The opening table tag can also take an attribute, border, which can be used to change the width of border around the table. Values are in pixels, so you may have to experiment with different values to get the effect you want. The default value of this attribute is 1 pixel

  In the markup, it looks like this:

  <table border="n">

  So, to use the example above, with a thick border (and aligned to the text flow), we would use the following markup:

  <table border="15" bordercolor="#ff0000">
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  </table>
  

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

• <caption> </caption> This paired tag marks the beginning and end of the table's caption or title. The default value for the caption is top, so there's no need to include it in the markup if that's where you want it. Your other option is to use attribute align="bottom", which places the caption below the table
• <tr></tr> This paired tag marks the beginning and end of a single row of the table. Within each row, you may have regular cells, which can contain text, data, images, and/or links, and header cells, which label the row or column

  The tr tag is the basic tool for creating tables because you determine the number of columns in the table by defining a number of cells within a single pair of table row tags (<tr> </tr>).

  A browser will display the table using the largest number of cells that are defined for any row in the table (it will include empty cells in rows with fewer cells).

• <th> </th> This paired tag is used to place a header in the appropriate row or column of the table. It appears after the opening <tr> tag and can be used anywhere in your table markup. The th and /th tags define the boundaries of a single cell. The text included within this cell will be displayed in bold type

  For example, to place headers across the top row of your table, you would place the header tags between the tags defining the first row of your table. The markup looks like this:

  <table>
  <tr>
      <th>Students</th>
      <th>Faculty</th>
      <th>Babies</th>
      <th>Cats </th>
  </tr>
  </table>
  

  To place headers down the first column of your table, you would place each header tag between the tags defining the each row of your table. The first header is the first cell of each row. The markup looks like this:

  <table>
  <tr>
      <th>Understand html</th>
      <td>60%&</td>
  </tr>
  <<tr>
      <th>Sort of get it</th>
      <td>30%</td>
  </tr>
  <tr>
      <th>Don't get it</th>
      <td>8%</td>
  </tr>
  <tr>
      <th>Chase mice</th>
      <td>2%</td>
  </tr>
  </table>
  

  Note that you can combine these two ways of displaying headers so that you can have them running across the top row and down the first column. This is how the headers were placed in the first row and first column of the "Who 'gets' the web" table above

• <td> </td> This paired tag is used define a single cell in a table row (tr). You use these tags to place content, such as data, an image, and/or a links in cell. In the example above, you can see the first column of data marked up

  As mentioned above, the largest number of cells in a table row determines the number of columns that will be displayed in the table, so to create a 3X2 table, you would use the following markup:

  <table border="2">
  <tr>
      <td>Text goes here</td>
      <td>More text goes here</td>
      <td>Even more here</td>
  </tr>
  <tr>
      <td>And here</td>
      <td>Here too</td>
      <td>Don't forget here</td>
  </tr>
  </table>
  

  It would look like this:

  Text goes here	More text goes here	Even more here
  And here	Here too	Don't forget here

  To create an empty cell, use this markup:

  <td><br /></td>

  It is also possible to use non-breaking space to accomplish the same thing

  <td>&nbsp;</td>

  To put an empty cell in the middle of the table shown above, you would use the following markup:

  <table border="2">
  <tr>
      <td>Text goes here</td>
      <td>>More text goes here</td>
      <td><br /></td>
      <td>Even more here</td>
  </tr>
  <tr>
      <td>And here</td>
      <td>Here too</td>
      <td>&nbsp;</td>
      <td>Don't forget here</td>
  </tr>
  </table>

  And it would look like this:

  Text goes here	More text goes here		Even more here
  And here	Here too		Don't forget here

  Notice that you have to repeat the empty cell markup in the second table row. If you didn't, here's what it would look like:

  Text goes here	More text goes here		Even more here
  And here	Here too	Don't forget here

  Notice the ugly wannabe table cell in the lower right hand corner!

• <cellspacing="r"> This is an attribute that adds space between cells in your table and between cells and the outer edge of the table. Values are in pixels, and the default is 2, so if you don't like it, you may have to experiment with different values to get the effect you want

  In the markup, it looks like this:

  <table border="n" cellspacing="r">

  So, to use the example above, with lots of cellspacing (and aligned to the text flow), we would use the following markup:

  <table border="6" cellspacing="10">
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  </table>

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

• <cellpadding="x"> This is an attribute that can be used to add space around the contents of a cell, effectively increasing its size. Values are in pixels, and the default is 1, so if you don't like it, you may have to experiment with different values to get the effect you want.

  So, to use the example above, with lots of cellpadding (and aligned to the text flow), we would use the following markup:

  <table border="2" cellpadding="10">
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  </table>

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

  These attributes can be combined, in which case the markup looks like this:

  <table border="n" cellspacing="r" cellpadding="x">

  A table with lots of cellspacing and cellpadding would have the following markup:

  <table border="2" cellspacing="20" cellpadding="20">
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  </table>

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

• In the image below, you can see where these components are:

  

• <width="y"> This is attribute that can change the width of the table. Values are in pixels or percentages. It is also possible to change the width of an individual cell by using this attribute within the <th> and <td> paired tags

  To change the entire table, the markup looks like this:

  <table border="n" width="75%" cellspacing="r" cellpadding="x">

  Here's the markup for our table when we adjust the width using minimal cellspacing and cellpadding:

  <table border="2" width="75%" cellspacing="5" cellpadding="5">
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  </table><

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

  The height attribute can be used at the table cell level. To change a single cell, the markup looks like this:

  <td width="200" height="200">Cell contents</td>

  Note that by changing one cell, you affect the alignment of the entire row and the column within which the cell is located.

  Here's the markup to change the height and width of a single cell in a 3X3 table using values in pixels:

  <table border="2">
  <tr>
      <td height="200" width="75">Cell#1</td>
      <td>Cell#2</td>
      <td>Cell#3</td>
  </tr>
  <tr>
      <td>Cell#4</td>
      <td>Cell#5</td>
      <td>Cell#6</td>
  </tr>
  <tr>
      <td>Cell#7</td>
      <td>Cell#8</td>
      <td>Cell#9</td>
  </tr>
  </table>

  It would look like this:

  Cell#1	Cell#2	Cell#3
  Cell#4	Cell#5	Cell#6
  Cell#7	Cell#8	Cell#9

  Note the differences in the height of the cells in the first row and the width of the cells in the first column caused by this markup

• <colspan="n"> This is an attribute that will allow you to stretch a cell across two or more columns; n is the number of columns across which the cell should stretch. This is useful for headers, but can also be used with any cell

  Use this markup to stretch a header cell across three columns of a six column table:

  <tr>
      <th colspan="3">Students and cats</th>

  Here's the markup to stretch a cell across three columns of a 2X4 table:

  <table border="2">
  <tr>
      <td colspan="3">Cell#1</td>
      <td>Cell#4</td>
  </tr>
  <tr>
      <td>Cell#5</td>
      <td>Cell#6</td>
      <td>Cell#7</td>
      <td>Cell#8</td>
  </tr>
  </table>

  It would look like this:

  Cell#1			Cell#4
  Cell#5	Cell#6	Cell#7	Cell#8

• <rowspan="n"> This is an attribute that will allow you to stretch a cell across two or more rows; n is the number of rows across which the cell should stretch. This is useful for headers, but can also be used with any cell

  Use this markup to stretch a header cell across two rows of a four row table (this markup will produce an empty cell):

  <tr>
      <td rowspan="2"><br /></td>

  Here's the markup to stretch a cell across two rows of a 2X4 table:

  <table border="2">
  <tr>
      <td rowspan="2">Cell#1</td>
      <td>Cell#2</td>
      <td>Cell#3</td>
      <td>Cell#4</td>
  </tr>
  <tr>
      <td>Cell#6</td>
      <td>Cell#7</td>
      <td>Cell#8</td>
  </tr>
  </table>

  It would look like this:

  Cell#1	Cell#2	Cell#3	Cell#4
  	Cell#6	Cell#7	Cell#8

  You can combine colspan and rowspan attributes to create some interesting tables. For example:

  <table border="4" width="85%" bordercolor="#000000">
  <tr align="left" valign="top">
      <td height="75">Cell#1</td>
      <td>Cell#2</td>
      <td>Cell#3 </td>
      <td rowspan="2" colspan="4">Cell#4</td>
      <td>Cell#8</td>
      <td>Cell#9</td>
      <td>Cell#10</td>
  </tr>
  <tr align="left" valign="top">
      <td height="75">Cell#11</td>
      <td>Cell#12</td>
      <td>Cell#13</td>
      <td>Cell#18</td>
      <td>Cell#19</td>
      <td>Cell#20</td>
  </tr>
  <tr align="left" valign="top">
      <td height="75">Cell#21</td>
      <td rowspan="2" colspan="3">Cell#22</td>
      <td>Cell#25</td>
      <td>Cell#26</td>
      <td>Cell#27</td>
      <td>Cell#28</td>
      <td>Cell#29</td>
      <td>Cell#30</td>
  </tr>
  <tr align="left" valign="top">
      <td height="75">Cell#31</td>
      <td>Cell#34</td>
      <td>Cell#35</td>
      <td colspan="4">Cell#36</td>
  </tr>
  </table>

  Try to draw this table.

  To see it, use this link to open up a new browser window. Close the window when you are finished and return here.

• Nesting tables It is possible to nest tables within tables. This provides options for more complex table layout. The drawback is that the rendering of netsted tables slows down the download of the page using them.

  Here's markup for nested tables that uses different bordercolors to make clear where the nested tables are

  <table border="2" bordercolor="#000000">
  <tr>
      <td>Cell #1</td>
      <td>Cell #2</td>
      <td>
          <table border="2" bordercolor="#ff0000" width="100%">
          <tr>
              <td>Cell #3</td>
              <td>Cell #4</td>
          </tr>
          <tr>
              <td>Cell #5</td>
              <td>Cell #6</td>
          </tr>
          </table>
      </td>
  </tr>
  <tr>
      <td height="40">Cell #7</td>
      <td>Cell #8</td>
      <td>Cell #9</td>
  </tr>
  <tr>
      <td>Cell #10</td>
      <td>Cell #11</td>
      <td>
          <table border="2" bordercolor="blue">
          <tr>
              <td height="40">Cell #12</td>
              <td>Cell #13</td>
              <td>Cell #14</td>
          </tr>
          </table>
      </td>
  </tr>
  </table>

  And here's what the nested tables look like:

  Cell #1	Cell #2	Cell #3 Cell #4 Cell #5 Cell #6
  Cell #7	Cell #8	Cell #9
  Cell #10	Cell #11	Cell #12 Cell #13 Cell #14

• <nowrap="nowrap"> This is an attribute that will prevent the browser from wrapping a line of text or an image to fit in a cell. It will cause the browser to display the contents of that cell as a single line, increasing the size of that cell.

  Use this markup to prevent a line of text from wrapping within a cell:

  <tr>
      <td nowrap="nowrap">What's in this cell anyway?</td>

  Here's the markup to prevent the browser from wrapping the contents of the first cell in a 2X3 table:

  <table border="2">
  <tr>
      <td nowrap="nowrap">This is where you'd place the contents in Cell#1</td>
      <td>Cell#2</td>
      <td>Cell#3</td>
  </tr>
  <tr>
      <td>Cell#4</td>
      <td>Cell#5</td>
      <td>Cell#6</td>
  </tr>
  </table>

  It would look like this:

  This is where you'd place the contents in Cell#1	Cell#2	Cell#3
  Cell#4	Cell#5	Cell#6

  Notice that the nowrap attribute is placed in the first cell of the first row, but it affects the width of the first cell in the second and any additional rows

• You can force a break in the contents of a cell with the standard line break tag with a cell if you wish:

  <tr>
      <td>What's in this cell<br />anyway?</td>

  To break up the text in the table above, you would use the following markup:

  <table border="2">
  <tr>
      <td>This is where you'd place<br />
      the contents in Cell#1</td>
      <td>Cell#2</td>
      <td>Cell#3</td>
  </tr>
  <tr>
      <td>Cell#4</td>
      <td>Cell#5</td>
  </tr>
  </table>

  It would look like this:

  This is where you'd place the contents in Cell#1	Cell#2	Cell#3
  Cell#4	Cell#5	Cell#6

• <align="direction"> and <valign="direction"> You can align the text or image horizontally in a cell by using the <align="direction"> attribute within the <td> or <th> tags. There are three values, each of which locates the contents of a cell in a different place along a horizontal line through the middle of the cell:

  Left

  Right

  Center

  The markup looks like this:

  <td align="left">60%</td>

  You can also align a cell's contents vertically within the cell using the <valign="direction"> attribute. The values include the following directions:

  Top

  Middle

  Bottom

  Baseline

  The markup for aligning the contents of a cell would look like this:

  <td valign="bottom">60%</td>

  These attributes can be (and often are) combined in a single tag

  <td align="left" valign="bottom">60%</td>

  To see the effects of these attributes, the following markup for a 2X4 table will shift the content around in the cells of the table. The cell sizes have been adjusted to illustrate the differences in positioning:

  <table border="2">
  <tr>
      <th height="150" width="150">A baseline<br />
      A second line</td>
      <td width="150" align="left">Cell#1 (Left)</td>
      <td width="150" align="center">Cell#2 (Center)</td>
      <td width="150" align="right">Cell#3 (Right)</td>
      <td width="150" align="left">&nbsp;</td>
  </tr>
  <tr>
      <th height="150">A baseline<br />
      A second line)</td>
      <td valign="top">Cell#5 (Top)</td>
      <td valign="middle">Cell#6 (Middle)</td>
      <td valign="bottom">Cell#7 (Bottom)</td>
      <td valign="baseline">Cell#8 (Baseline) - This is clearly not working!</td>
  </tr>
  </table>
  

  It would look like this:

  <align> A baseline A second line	Cell#1 (Left)	Cell#2 (Center)	Cell#3 (Right)
  <valign> A baseline A second line	Cell#5 (Top)	Cell#6 (Middle)	Cell#7 (Bottom)	Cell#8 (Baseline) - This is clearly not working

• To place an image or a link within a cell in a table, you must combine the appropriate tags within the tags used to define the cell

  The markup for an image within a cell would look like this:

  <tr>
      <td><img src="terminator.gif" align="middle" alt="Terminator" /></td>

  The markup for an link within a cell would look like this:

  <tr>
      <td><a href="http://www.slis.indiana.edu/hrosenba/www/Demo/Demo.html">Demo page: Paired Tags</a></td>

  So here's the markup for a 1X2 table with an image in one cell and a link in the other:

  <table border="2">
  <tr>
      <td><img src="terminator.gif" align="middle" alt="Terminator" /><td>
      <td><a href="http://www.slis.indiana.edu/hrosenba/www/Demo/Demo.html">Demo page: Paired Tags</a></td>
  </tr>
  </table>

  It would look like this:

  Demo page: Paired Tags

• <background="image.gif"> It is possible to use an image as a background for the entire table and for individual cells

  This is the markup to use the image as the background for the entire table:

  <table border="2" background="../Images/dark.jpg">
  <tr>
      <td height="100" width="100">Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td>Cell#3</td>
      <td height="100" width="100">Cell#4</td>
  </tr>
  </table>
  

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

  This is the markup to place the background in a single cell:

  <table border="2">
  <tr>
      <td height="100" width="100">Cell#1</td>
      <td>Cell#2</td>
  </tr>
  <tr>
      <td background="../Images/dark.jpg">Cell#3</td>
      <td height="100" width="100">Cell#4</td>
  </tr>
  </table>
  

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

  There are some differences in the way Netscape and Internet Exporer display backgrounds in tables:

  If you use the background for the entire table,

  Netscape copies the entire image into each cell

  Internet Explorer will place the image behind the entire table

  If you use the background for a table row,

  Netscape displays it across the table row

  Internet Explorer ignores this use of the background attribute

• <bgcolor="#rrggbb"> Snce Netscape 3.x and Internet Explorer 3.x, browsers can render markup that allows you to change the color of table cells. To do this, you use the <bgcolor="#rrggbb"> attribute inside the opening <td> or <tr> tag. Earlier versions of these browsers will ignore this tag

  Keep in mind that if you change the color of a cell, you may also want to change the color of the font of the text in the cell. To do this, you'd use the <font color="#rrggbb"> tag.

  To change the color of the cells and text in a 2X2 table, you would use the following markup:

  <table border="2" cellpadding="10">
  <tr>
      <td bgcolor="#ff0000"><font color="#00ff00">Cell#1</font></td>
      <td bgcolor="#ffff00"><font color="#0000ff">Cell#2</font></td>
  </tr>
  </tr>
      <td bgcolor="#0000ff"><font color="#ffff00">Cell#3<</font></td>
      <td bgcolor="#00ff00"><font color="#ff0000">Cell#4</font></td>
  <tr>
  </table>

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

  It is also possible to change the color of a row, in which case you'd use the <bgcolor="#rrggbb"> attribute inside the opening <tr> tag. Remember that if you use this tag in different places in your table, there is a priority that the browser will follow to display the colors. It recognizes cell color first, then row color, and finally, table color.

• Many of the other HTML tags we have been working with will work in a table. For example, look at the following markup for a simple table:

  <table border="2">
  <<tr>
      <td><font size="7">Cell#1</font></td>
      <td><font size="4"><I>Cell#2</I></font></td>
  </tr>
  <tr>
      <td><font size="5" face="Times, serif" color="#ff0000">Cell#3</font></td>
      <td><font size="1">Cell#4</font></td>
  </tr>
  </table>

  It would look like this:

  Cell#1	Cell#2
  Cell#3	Cell#4

• So here's an interesting way to use a table as layout tool. Here's the markup:

  <table border="0" cellspacing="20">
  <tr>
      <td valign="top" align="left">Let's use a fair amount of text here so that we can see just what type of layout is possible using the table tags in our markup. Notice in this markup that we have specified a border=0 so that the browser will not draw lines around the table. If we have done this correctly...
      <td>...you will be able to see that this type of markup allows you to simulate columns of text. This means that you can make a page look like a newspaper with as many columns as you want! Although we did not do it in this example, you should be able to use this type of markup to display images and blocks of text in specific places on the page.</td>
  </table>
  

  And it would look like this:

  Let's use a fair amount of text here so that we can see just what type of layout is possible using the table tags in our markup. Notice in this markup that we have specified a border="0" so that the browser will not draw lines around the table. If we have done this correctly...

  ...you will be able to see that this type of markup allows you to simulate columns of text. This means that you can make a page look like a newspaper with as many columns as you want! Although we did not do it in this example, you should be able to use this type of markup to display images and blocks of text in specific places on the page. the space between the two columns is caused by the use of the cellspacing attribute. It pushed the two cells apart forming a gutter between them. The align and valign attributes are used to ensure that the text will begin at the top left corner of the tealb cell no matte what happens to the size of the window or the amount of text orr orhet content in each cell.

To summarize, tables give you several levels of control.

Note that his link opens a new browser window - close it to come back here

There's more we can do with tables