tfoot (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<tfoot>
</tfoot>

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.

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

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

User-contributed notes

Related Products