<tfoot> element
The <tfoot> element groups the footer content in a table, typically containing summary rows such as totals, averages, or other aggregate information. It works alongside <thead> and <tbody> to provide complete semantic structure for complex tables.
This page was last updated on 2025-11-17
Syntax
The tfoot element can appear either before or after tbody in the source code, but browsers will render it at the bottom of the table:
<table>
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<td>$500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Product A</td>
<td>$300</td>
</tr>
<tr>
<td>Product B</td>
<td>$200</td>
</tr>
</tbody>
</table>
Note: In HTML5, the tfoot can appear after tbody as well. Browsers will always render it at the bottom regardless of source order.
Key Attributes
The tfoot element has no specific attributes in modern HTML. The following obsolete attributes should be replaced with CSS:
align(obsolete) — Use CSStext-aligninsteadvalign(obsolete) — Use CSSvertical-aligninsteadchar(obsolete) — Character for alignmentcharoff(obsolete) — Offset for character alignment
Modern styling example:
tfoot {
background-color: #f0f0f0;
font-weight: bold;
border-top: 2px solid #333;
}
Examples
Table with Totals
<table>
<caption>Monthly Expenses</caption>
<thead>
<tr>
<th>Category</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>$1,850</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Rent</td>
<td>$1,200</td>
</tr>
<tr>
<td>Utilities</td>
<td>$150</td>
</tr>
<tr>
<td>Groceries</td>
<td>$500</td>
</tr>
</tbody>
</table>
Multiple Summary Rows
<table>
<thead>
<tr>
<th>Product</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Subtotal</th>
<td>$10,000</td>
<td>$12,000</td>
<td>$11,500</td>
<td>$15,000</td>
</tr>
<tr>
<th scope="row">Tax</th>
<td>$1,000</td>
<td>$1,200</td>
<td>$1,150</td>
<td>$1,500</td>
</tr>
<tr>
<th scope="row">Grand Total</th>
<td>$11,000</td>
<td>$13,200</td>
<td>$12,650</td>
<td>$16,500</td>
</tr>
</tfoot>
<tbody>
<!-- Data rows here -->
</tbody>
</table>
Statistics Footer
<table>
<thead>
<tr>
<th>Student</th>
<th>Score</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Average</th>
<td>85.5</td>
</tr>
<tr>
<th scope="row">Highest</th>
<td>98</td>
</tr>
<tr>
<th scope="row">Lowest</th>
<td>72</td>
</tr>
</tfoot>
<tbody>
<tr><td>Alice</td><td>92</td></tr>
<tr><td>Bob</td><td>85</td></tr>
<tr><td>Carol</td><td>98</td></tr>
<tr><td>David</td><td>72</td></tr>
</tbody>
</table>
When to Use
Use tfoot for:
- Displaying totals, subtotals, or sums
- Showing averages or other statistical summaries
- Adding notes or legends that apply to the entire table
- Any summary information that logically belongs at the bottom
Benefits of using tfoot:
- Screen readers recognize it as summary information
- When printing long tables, the footer can repeat on each page
- Can be placed before tbody in source but renders at bottom
- CSS can target footer rows distinctly from data rows
- Provides clear semantic meaning to summary data
Note: A table can only have one <tfoot> element, but it can contain multiple rows for complex summaries.
