Français

<tfoot>

Adding a table footer: totals, averages, summaries

— 1 min read

  • HTML
  • accessibility
  • semantics
  • tables

<tfoot> — The table footer

The <tfoot> element groups the summary rows of a table — totals, averages, subtotals, recaps. It is placed after <tbody> (or before — the browser always renders it at the bottom).

When to use it

Your table has a total or summary row at the bottom. Instead of putting that row in <tbody>, use <tfoot> to distinguish it semantically from the raw data.

What you gain

Accessibility: screen readers identify <tfoot> as a section distinct from the data body. Users can jump straight to the summary without traversing every data row.

Code example

<table>
  <caption>Monthly expenses</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hosting</td>
      <td>45</td>
    </tr>
    <tr>
      <td>Domain</td>
      <td>12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>57</td>
    </tr>
  </tfoot>
</table>

Further reading