| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
Description
The tfoot
is an odd element in that it seems to defy logic. Common sense would
suggest that if you have table headers wrapped in the thead element, followed by the body of the table wrapped in
a tbody, the footer content should naturally follow
that . But this is not the case. Oddly enough, like a biology experiment
gone wrong, the correct order for these elements is head, foot, body (or
thead, tfoot,
tbody, to use the correct element names).
There
are reasons for this apparently illogical approach. By providing the
table’s header and footer content up-front in the thead
and tfoot elements, respectively, the browser has the
opportunity to render that information first, then incrementally fill the
body of the table. An example of how this might practically be put to use
is in printing a table. If the browser has an option to print the header
and footer of a table on each printed sheet, it means not having to parse
the entire table content first - the footer information is available for
processing right from the get-go.
Despite the
tfoot content coming before the body of the table, the
browsers we tested correctly identify that it’s intended as footer
content, and place it in the appropriate location—at the end of the
table—as Figure 1 shows.
Example
The tfoot element
wraps around the footer area of the table data:
<table summary="Interest Rates" width="400" border="1">
<caption>Interest Rates</caption>
<thead>
<tr>
<th>Account Type</th>
<th>Interest Rate</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Recommended for you: 'Young Saver'</td>
<td>Interest from: 1.6%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Smart</td>
<td>From 2%</td>
</tr>
<tr>
<td>Young Saver</td>
<td>From 1.6%</td>
</tr>
</tbody>
</table>
Use This For …
This element is used to group the table’s footer area (which may be a summary, an addition of column values, or some call to action based on the preceding content).
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- align
aligns text in table cells contained inside tfoot element - char
sets the character to which tfoot element contents should align - charoff
defines the number of characters by which cell contents will be offset from the char - valign
aligns text vertically in table cells contained inside the tfoot element
