The <tfoot> Element
As defined in the HTML Living Standard, the <tfoot> element represents the footer section of a table. It is typically used to summarize the data presented in the table, such as totals, averages, or final conclusions.
| Item | Cost |
|---|---|
| Hosting | $20.00 |
| Domain | $10.00 |
| Total | $30.00 |
(The summary row is wrapped in a <tfoot> element.)
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>$30.00</td>
</tr>
</tfoot>
</table>
View HTML Living Standard: The tfoot element
Technical Rules & Hierarchy
- Placement: The
<tfoot>must be a child of a<table>. In modern HTML, it typically appears after the<tbody>. - Content: It can contain zero or more
<tr>elements. - Semantic Purpose: It explicitly identifies the "summary" or "conclusion" area of the table, separating it from the main data body.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The <tfoot> element provides a programmatic signal that the contained rows are summaries of the data above. This allows assistive technologies to treat the footer differently—for example, by announcing it as a "footer" or "summary" section, which helps users quickly find the final results of a data set without reading every single row.
Best Practices
- Use TH for Labels: Even in the footer, use
<th>for the cell that labels the summary (e.g., "Total" or "Average"). - Consistency: If you use a
<thead>, you should generally use a<tbody>and<tfoot>to maintain a consistent structural pattern. - Styling: Use CSS to visually distinguish the footer (e.g., a thicker top border or bold text) to signal the end of the data set.
A11y Tip: Summary Clarity
Ensure that the labels in your <tfoot> are clear and unambiguous. Instead of just "Total," use "Total Monthly Cost" if the table context allows, providing maximum clarity for users who are navigating the table linearly.