<thead>, <tfoot> and <tbody>

Topics on This Page

<thead>, <tfoot> and <tbody>
Example

<thead>, <tfoot> and <tbody>

<thead>, <tfoot> and <tbody> were introduced in IE 4, before the HTML 4.0 specification was adopted. These tags were found useful and were adopted into HTML 4.0. Since Netscape 4 predates IE 4 and HTML 4.0, Netscape 4 and earlier do not recognize these tags.

The idea behind these tags is to eventually support a scrolling table. Zero or more rows can be designated as heading rows, and zero or more can be designated as footing rows. The remaining rows are designated as the body of the table. The heading and/or footing rows would be displayed as fixed rows, while the body rows would be displayed between them in a scrollable area. As of yet, no browsers support scrollable tables, but the <thead>, <tfoot> and <tbody> tags can be useful for other purposes.

As you will recall, a table consists of rows (defined with <tr>) that in turn consist of cells (defined with <td> or <th>). When you use <thead>, <tfoot> and <tbody>, you place these around one or more rows like so:

<table>
<thead>
  <tr> ... </tr>
  <tr> ... </tr>
  ...
</thead>
<tfoot>
  <tr> ... </tr>
  <tr> ... </tr>
  ...
</tfoot>
<tbody>
  <tr> ... </tr>
  <tr> ... </tr>
  ...
</tbody>
</table>

When you use these tags, all of the rows should be placed within one of these tags. You can have at most one <thead> (though it can contain more than one row), and it must appear first. You can have at most one <tfoot>, and it must appear after <thead> (if there is one) and before any <tbody> tags. Finally are the <tbody> tags. You can have more than one of these if you want to divide the body rows into more than one group. When we talk about frames and rules shortly, you'll see why you might want to do this.

The reason for placing <tfoot> before <tbody> is that, if and when scrollable tables ever get supported, that the browser first encounter the fixed rows for the table. It can immediately display those before reading all of the rows for the scrollable part of the table. Unfortunately, this means that in browsers such as Netscape 4 and earlier and IE 3 and earlier, the header and footer rows are both displayed before the body rows. Largely for this reason, very little use has been made of <tfoot> in most web pages today.

Since no existing browsers support scrollable tables, simply including <thead>, <tfoot> and/or <tbody> makes no difference to the appearance of the table. However, these tags do support the align and valign properties, and apply them to all cells within the row group. These can be used as attributes within the tag, or applied via CSS.

IE also recognizes bgcolor in these tags, either as an attribute or as a CSS property. This is proprietary: HTML 4.0 does NOT include background color for these tags either as an attribute or via CSS. Netscape 6 does not support it.

In general, it's better to place these attributes within the <tr> tags rather than in <thead>, <tfoot> and <tbody> so that they'll be recognized and acted on by browsers that don't recognize the newer tags. But if you have a number of rows within one of these tags and if you're not concerned whether Netscape 4 and other browsers don't recognize the attributes, you can save coding by placing these in the <thead>/<tfoot>/<tbody> tag rather than in each of the <tr> tags.

Example

Here's a table that includes one heading row, one footing row, and a set of body rows.

CSS is used to specify background colors for the row groups. Note that IE supports this, but Netscape 6 does not.

CSS is used to apply text-align: center; to tfoot. Both IE and Netscape 6 support this.

If you can view this in Netscape 4 or another browser that doesn't recognize the new tags, you'll see that the footing row appears above the body rows, and you'll see that none of the formatting attributes for the row groups are applied. In these older browsers, it's just as if the <thead>, <tfoot> and <tbody> tags aren't even there.