The <tfoot> Element
As defined in the HTML Living Standard, the <tfoot> element represents the block of rows that consist of the column summaries (footers) for the parent <table> element.
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum | $180 |
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1,000</td>
</tr>
</tfoot>
</table>
View HTML Living Standard: The tfoot element
Placement and Structure
The <tfoot> element has specific rules regarding its position within a <table>:
- Current Standard: In modern HTML5,
<tfoot>must appear after<thead>and<tbody>. - Legacy Behavior: Older HTML specifications required
<tfoot>to appear before the<tbody>(so browsers could render the footer before fetching large datasets). Modern browsers support both placements, but the "after" position is the current recommendation. - One per Table: A table must not contain more than one
<tfoot>element.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <tfoot>, you explicitly identify the "totals" or "summaries" of your data. For a screen reader user, this programmatic grouping is essential for distinguishing the final results from individual data rows. Some browsers and printers use this tag to ensure the table footer repeats at the bottom of every printed page if a table spans multiple sheets, ensuring the relationship remains perceivable in all media.
Best Practices
- Avoid for General Content: Do not use
<tfoot>for general notes or citations; use<caption>or a<figcaption>instead. The footer is specifically for column/row summaries. - Consistent Styling: Following SMACSS Module Rules, apply distinct visual weight to the
<tfoot>(like a thicker top border or a subtle background change) to help all users quickly identify the summary line. - TH vs TD in Footers: While usually containing
<td>elements, if a cell in the footer labels the totals (e.g., the word "Total"), you can use<th scope="row">within the footer to maintain proper semantics.
A11y Tip: Large Tables
In extremely long tables, a footer helps anchor the user. Ensure that your <tfoot> cells align perfectly with the <thead> columns so that the programmatic and visual summaries are in sync.