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
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
tbody, to use the correct element names).
are reasons for this apparently illogical approach. By providing the
table’s header and footer content up-front in the
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.
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.
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).
It causes no compatibility issues, and has excellent support across all tested browsers.