The HTML <tfoot> tag
Quick answer
The HTML <tfoot> element groups the footer rows of a <table> — typically summary rows like totals. It contains <tr> rows.
Overview
The <tfoot> element marks a table's footer — most often a summary row such as column totals or averages. It groups those rows into their own section, distinct from the header and body.
Like <thead>, grouping the footer helps you style it separately and lets browsers repeat it when a long table prints across pages, so the totals appear at the foot of each page. A table has at most one <tfoot>.
Syntax
<tfoot>
<tr><th scope="row">Total</th><td>£530</td></tr>
</tfoot>Example
<table border="1">
<tbody><tr><td>Mugs</td><td>£320</td></tr><tr><td>Shirts</td><td>£210</td></tr></tbody>
<tfoot><tr><th scope="row">Total</th><td>£530</td></tr></tfoot>
</table>Best practices
- Use
<tfoot>for summary rows such as totals or averages. - Include at most one
<tfoot>per table. - Use it so the footer can repeat on each page when a long table prints.
- Style it independently of the <tbody> with CSS.
Frequently asked questions
What is the tfoot element?
It groups a table's footer rows — usually a summary such as column totals — into their own section.
Does tfoot repeat on print?
Yes. Like <thead>, browsers can repeat the footer on each printed page of a long table.
Where does tfoot go in the markup?
In modern HTML it is placed after the <tbody>; the browser still renders it at the foot of the table.