tfoot (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| Partial | Partial | Partial | Partial |
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. This approach is often desirable when you’re accessing
the content over a very slow connection, or when the table runs to a
considerable length (or both!).
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 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial | Partial |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
align
aligns text in table cells contained insidetfootelementchar
sets the character to whichtfootelement contents should aligncharoff
defines the number of characters by which cell contents will be offset from thecharvalign
aligns text vertically in table cells contained inside thetfootelement
User-contributed notes
- ID:
- #1
- Date:
- Fri, 28 Mar 2008 13:29:36 GMT
I think the main reason for having TFOOT appear before TBODY is to do with printing. A user agent may render the header and footer on each page when a table with many rows is printed. In order to avoid having to parse the entire table before starting to render it, the TFOOT needs to appear before the TBODY.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.