HTML <tfoot> Tag

The <tfoot> element in HTML is used to group the footer content in a <table>. Typically, it contains summary information, totals, or any information that should appear at the bottom of a table. The content inside <tfoot> is often composed of one or more <tr> (table row) elements, which themselves contain <td> or <th> cells.

A key feature of <tfoot> is that it allows table footers to be visually and semantically separated from the main body (<tbody>) and header (<thead>), which helps both users and assistive technologies understand the structure of the table. When tables are long and scrollable, many browsers will render the <tfoot> section in a way that keeps it visible, either by repeating it or fixing it at the bottom, though this behavior depends on CSS and table rendering.

Using <tfoot> also improves accessibility, as screen readers can recognize footer content as distinct from the main data, allowing users to quickly locate totals or summary information. Semantically, it conveys that the enclosed rows are related to the overall table summary, not individual data points.

In practice, <tfoot> is most commonly used for financial tables (showing totals), statistical tables (showing averages or summaries), or any data presentation where a final row of aggregated information is necessary.

Example structure:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>$3</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>$4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$7</td>
    </tr>
  </tfoot>
</table>

Here, <tfoot> clearly marks the “Total” row as the table’s footer, separate from the data rows in <tbody> and the headings in <thead>.