How to Use the tfoot Element
The tfoot element groups rows that summarize a table, such as a total. It belongs inside a table; it is not the footer at the bottom of a whole webpage.
The short answer
Put a table's total or other summary row inside tfoot. Use thead for heading rows and tbody for the main data rows.
tfoot does not calculate anything. Your HTML or JavaScript must provide the value. You can leave it out when the table has no summary row.
A small example
<table>
<caption>Fruit stock</caption>
<thead>
<tr><th scope="col">Item</th><th scope="col">Count</th></tr>
</thead>
<tbody>
<tr><th scope="row">Apples</th><td>3</td></tr>
<tr><th scope="row">Pears</th><td>2</td></tr>
</tbody>
<tfoot>
<tr><th scope="row">Total</th><td>5</td></tr>
</tfoot>
</table>| Item | Count |
|---|---|
| Apples | 3 |
| Pears | 2 |
| Total | 5 |
“Total” names the row, so it is a row heading: th scope="row". The number is a data cell: td. The tfoot element groups the row; it does not add the numbers.
How it differs from thead and tbody
theadgroups rows with column headings.tbodygroups the table's main data rows.tfootgroups rows with a table total or summary.
In HTML, the usual order is to write tfoot after the table's data rows. It has a specific place in the table structure; it is not a general-purpose wrapper.
Common mistakes
- Expecting
tfootto add up the values. It only marks the row group. - Using it as the footer of the whole webpage. It belongs inside a table.
- Putting every word in the row inside
tfoot. Put rows intr, the row heading inth, and values intd. - Adding it to every table. It is optional.
Related pages
For grouping columns before the rows, see How to Use the colgroup Element.
- For the whole table, see How to Use the table Element.
- For column headings, see thead.
- For the main data rows, see tbody.
- For rows, see tr; for heading cells, see th.
- For tfoot rules and browser observations, see tfoot in Yugien Atlas.