Skip to: content, navigation

by Ian Lloyd

tfoot (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Partial Partial Partial Partial
<tfoot>
</tfoot>

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>
Type
table element
Contains
tr elements only
Contained by
table only

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.

Figure 1. The footer content appears after the body, despite coming before it in the source The footer content appears after the body, despite coming before it in source order

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

IE5.5Partial
6.0Partial
7.0Partial
Firefox1.0Partial
1.5Partial
2.0Partial
Safari1.3Partial
2.0Partial
3.0Partial
Opera9.2Partial
9.5Partial

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

Related Reading

User-contributed notes

ID:
#1
Date:
Fri, 28 Mar 2008 13:29:36 GMT
Contributed by:
AutisticCuckoo

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.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters