HTML 4 enables you to group rows using the THEAD, TFOOT, and TBODY elements. When you create a table, you commonly have a header row (with cell headings), a number of rows with data, and then a footer row with totals.

If you use the THEAD, TFOOT, and TBODY elements, you must use every element, even if you don’t need the entire set. Although you must use them, you can leave them empty. The order in which they should appear is THEAD, TFOOT, and TBODY.

Why in this particular order? The browser needs to be able to load both the header and the footer information before it loads the body, which could be hundreds of rows. Down the road, you will be able to fit the entire table in one screen with the body scrolling, or the browser automatically putting a header and footer on each page, when it prints a long table.

Table Header <THEAD>

Start Tag: Required
Content: TR
End Tag: Optional

Attributes: id, class, lang, dir, events, title, style, char, charoff
align: right, left, center, justify, char (these are not deprecated)

valign: top, middle, bottom, baseline (these are not deprecated)
char: specifies a single character within a text fragment to act as an alignment axis. The default value for this attribute is the decimal point character for the current language as set by lang.

charoff: specifies the offset to the first occurrence of the alignment character on each line.

Table Footer <TFOOT>

Start Tag: Required
Content: TR
End Tag: Optional

Attributes: id, class, lang, dir, events, title, style, char, charoff
char: specifies a single character within a text fragment to act as an alignment axis. The default value for this attribute is the decimal point character for the current language as set by lang.

charoff: specifies the offset to the first occurrence of the alignment character on each line.

align: right, left, center, justify, char (these are not deprecated)
valign: top, middle, bottom, baseline (these are not deprecated)

Table Body <TBODY>

Start Tag: Required
Content: TR
End Tag: Optional

Attributes: id, class, lang, dir, events, title, style, char, charoff
char: specifies a single character within a text fragment to act as an alignment axis. The default value for this attribute is the decimal point character for the current language as set by lang.

charoff: specifies the offset to the first occurrence of the alignment character on each line.
align: right, left, center, justify, char (these are not deprecated)
valign: top, middle, bottom, baseline (these are not deprecated)

These three elements improve the appearance of the code from the preceding costs-and-cities table. The table renders as follows in Internet Explorer 4 and newer, but won’t work properly in any version of Netscape; Netscape doesn’t support these elements yet.

<TABLE cellspacing=”2” cellpadding=”2” border=”1” frames=”box”
rules=”cols”>
<THEAD align=”center” class=”table_header1”>
<TR align=”center”>
<TD>
<TH>Chicago
<TH>Washington, DC
<TH>New York
<TH>Charlottesville
<TFOOT align=”char” class=”table_footer1”>
<TR>
<TH align=”center”>Total
<TD>118.45
<TD>105.45
<TD>183.95
<TD>58.45
<TBODY align=”char” class=”table_body1”>
<TR>
<TH align=”center”>Breakfast
<TD>12.95
<TD>9.95
<TD>15.95
<TD>4.95
<TR>
<TH align=”center”>Lunch
<TD>13.50
<TD>9.50
<TD>16.00
<TD>6.50
<TR>
<TH align=”center”>Dinner
<TD>35.00
<TD>26.00
<TD>55.00
<TD>18.00
<TR>
<TH align=”center”>Transportation
<TD>12.00
<TD>15.00
<TD>22.00
<TD>9.00
<TR>
<TH align=”center”>Entertainment
<TD>45.00
<TD>45.00
<TD>75.00
<TD>20.00
</TABLE>


Figure 2-2 shows how the text renders in IE 5.0.



Several items in the preceding table definition may not have been clear in the first costs-and-cities-table example. First, notice the align attributes. These attributes are the only version of align that are not deprecated, because the text cannot be formatted in any other way within a cell.

In addition, the first costs-and-cities table contains more instances of the align attribute. Grouping the rows enables you to move the align=”char” attribute-value pair from each TD element to the TBODY element. Because the TH elements for each row still have an align=”center” attribute-value pair, this condition overrides the align attribute definition in the TBODY element. The headings should be centered, rather than decimal-aligned. All three of the new elements in this example have defined classes. As a result, classes must be defined in the style sheets for these elements. The classes are called table_header1, table_footer1, and table_body1, respectively.

The align attribute appears in the preceding examples with a value of “char.” What does this mean? The “char” value causes alignment over a set character. The default is the decimal. You can change the default by using an additional attribute called char. If you have a set of cells that all have slashes ( / ), and you want to align the cells by the slash, use the following code:

align=”char” char=”/”

You can further customize the alignment of the cell values by using the charoff attribute with a length (the number of pixels by which to offset the alignment), as in the following example:

align=”char” char=”/” charoff=”15”
Netscape Navigator and Internet Explorer do not currently support these uncommon usages.