I briefly mentioned the Table Header element. TH is used to define a cell as being a header for a row or column of a table. It typically makes the content of that cell appear centered and bolded. You can have more than one TH in a row or column.
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="1">
<TR>
<TD></TD>
<TH>Header for column one</TH>
<TH>Header for column two</TH>
</TR>
<TR>
<TH>Header for row one</TH>
<TD>Content of column one, row one</TD>
<TD>Content of column two row one</TD>
</TR>
</TABLE>| Header for column one | Header for column two | |
|---|---|---|
| Header for row one | Content of column one, row one | Content of column two row one |
The surprisingly rarely used CAPTION element is used to define a caption for the table. The CAPTION will appear above or below the table depending on its ALIGN attribute, which takes the values TOP (the default) and BOTTOM.
With IE, but not with Netscape, you can use VALIGN and ALIGN instead of just ALIGN. ALIGN can take values of TOP and BOTTOM as above, but also takes the values of LEFT, RIGHT and CENTER (the default). In this case the position of the caption above or below the table is determined by the VALIGN attribute. So <CAPTION ALIGN="top"> and <CAPTION ALIGN="center" VALIGN="top"> are identical.
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="1">
<CAPTION ALIGN="top">A caption for this table</CAPTION>
<TR>
<TD>This is the first cell of this table</TD>
<TD>This is the second cell of this table</TD>
</TR>
<TR>
<TD COLSPAN="2">This cell spans across two columns</TD>
</TR>
</TABLE>| This is the first cell of this table | This is the second cell of this table |
| This cell spans across two columns | |
It's possible to add background colours or images to whole tables, or to individual table cells. Background colours can also be assigned to table rows.
<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="2" BGCOLOR="#FF0000">
<TR>
<TD COLSPAN="3">This table has a red background</TD>
</TR>
<TR BGCOLOR="#00FF00">
<TD>This row has a green background</TD>
<TD BGCOLOR="#FFFFFF">This cell has a white background</TD>
<TD>This row has a green background</TD>
</TR>
<TR>
<TD>This table has a red background</TD>
<TD BGCOLOR="#FFFFFF">This cell has a white background</TD>
<TD>This table has a red background</TD>
</TR>
</TABLE>The above code produces the following result:
| This table has a red background | ||
| This row has a green background | This cell has a white background | This row has a green background |
| This table has a red background | This cell has a white background | This table has a red background |
If you look at the above example in Netscape Navigator and MS Internet Explorer you will notice a difference. In Netscape the background colours do not affect the spacing between cells (the space defined by the CELLSPACING attribute) whilst in IE a BGCOLOR set on TABLE does affect that spacing. In both browsers a BGCOLOR set on TR or TD affects the cell(s) including padding but nothing else.
Setting a background image works in exactly the same fashion, by using the BACKGROUND attribute in either TABLE or TD. As with BODY backgrounds the image will start in the top, left corner and will tile.
<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="2" BACKGROUND="grid.gif">
<TR>
<TD>This table has a background image.</TD>
<TD BACKGROUND="opera35.gif">This cell has a different
background image. As you can see some backgrounds make reading text
rather difficult.</TD>
</TR>
<TR>
<TD COLSPAN="2">This table has a background image, and here's a bit
more text so you can better see the effect. The quick brown fox jumped
over the lazy dog. Make your browser window narrower if this is still
not enough.</TD>
</TR>
</TABLE>The above code produces the following result:
| This table has a background image. | This cell has a different background image. As you can see some backgrounds make reading text rather difficult. |
| This table has a background image, and here's a bit more text so you can better see the effect. The quick brown fox jumped over the lazy dog. Make your browser window narrower if this is still not enough. | |
Again Netscape and IE behave differently. When a background image is applied to the whole TABLE, Netscape will start tiling it afresh in each cell, rather than tiling it continually across the whole table. IE also applies the border to the spacing between cells whilst Netscape does not. I have a test page which demonstrates the tiling problem along with a solution.
It's also possible to change the colour of the border of the table with the BORDERCOLOR attribute of the TABLE tag.
<TABLE BORDER="4" CELLPADDING="2" CELLSPACING="0" BORDERCOLOR="#FF0000">
<TR>
<TD>This is the first cell of this table</TD>
<TD>This is the second cell of this table</TD>
</TR>
<TR>
<TD COLSPAN="2">This cell spans across two columns</TD>
</TR>
</TABLE>The above code produces the following result:
| This is the first cell of this table | This is the second cell of this table |
| This cell spans across two columns | |
Again Netscape and IE differ in their implementation. IE makes the whole border the specified colour, thereby making the border flat as opposed to the default 3-D appearance. Netscape preserves the 3-D appearance by using a lighter and darker shade of the colour on different parts of the border. IE can be made to adopt a 3-D appearance by using the BORDERCOLORLIGHT and BORDERCOLORDARK attributes instead of simple BORDERCOLOR. Netscape can not be made to produce a flat border.
<TABLE BORDER="4" CELLPADDING="2" CELLSPACING="0"
BORDERCOLORDARK="#FF6600" BORDERCOLORLIGHT="#FFCC00">
<TR>
<TD>This is the first cell of this table</TD>
<TD>This is the second cell of this table</TD>
</TR>
<TR>
<TD COLSPAN="2">This cell spans across two columns</TD>
</TR>
</TABLE>| This is the first cell of this table | This is the second cell of this table |
| This cell spans across two columns | |