<tfoot>

<tfoot> groups footer rows in a table, commonly totals or summaries. It is table structure, not a calculation engine and not a page footer.

A summary row

The total is written explicitly as 20. Changing a workshop count does not update it: calculate data in your application, then render the result.

<table>
  <caption>
    Workshop registrations
  </caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Places booked</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML basics</th>
      <td class="amount">12</td>
    </tr>
    <tr>
      <th scope="row">CSS layout</th>
      <td class="amount">8</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td class="amount">20</td>
    </tr>
  </tfoot>
</table>

/* Presentation: these styles make the table easier to read. */
table {
  border-collapse: collapse;
}
caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
th,
td {
  border: 1px solid #94a3b8;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Structure and printing

Use at most one <tfoot>, after the body rows in modern HTML. Its children are <tr> elements. A summary label can be <th scope="row">, with numeric results in <td>. If a label spans columns, make sure its colspan fits the actual grid.

Browsers may repeat a table footer across printed pages, depending on print layout and implementation. Test your document’s print preview.

Try a change

Add tfoot { font-weight: bold; background: #eff6ff; } to distinguish the total. This styling does not define header relationships; the <th> does. Use the page’s footer element for site information outside the table.

Sources and browser support

MDN: tfoot describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.