<tfoot> - table footer section

Author：Chuan Chen 阅读数：59697人阅读分类： HTML

<tfoot> is an HTML tag used to define the footer section of a table, typically containing summary rows or footnote information. Together with <thead> and <tbody>, it forms the structured grouping of a table, enhancing semantic meaning and styling control.

Basic Usage of `<tfoot>`

<tfoot> must be a direct child of <table> and can appear either before or after <tbody>, but browsers will always render it at the bottom of the table. A typical structure is as follows:

<table>
  <thead>
    <tr><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>¥12,000</td></tr>
    <tr><td>February</td><td>¥15,000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>¥27,000</td></tr>
  </tfoot>
</table>

Collaboration with `<thead>` and `<tbody>`

These three tags work together to achieve segmented rendering of the table. Even if <tfoot> appears before <tbody> in the source code, it will still be displayed at the bottom:

<table>
  <tfoot>
    <tr><td colspan="2">Last updated: October 2023</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Product A</td><td>Stock: 120 units</td></tr>
  </tbody>
</table>

Styling Control Features

<tfoot> supports independent CSS styling. For example, when creating a zebra-striped table, you can define a unique background color for the footer:

tfoot {
  background-color: #f2f2f2;
  font-weight: bold;
}

Cross-Column Layout Techniques

Use the colspan attribute to merge footer cells. This design is often used for summary rows:

<tfoot>
  <tr>
    <td colspan="2">Average Temperature</td>
    <td>23℃</td>
  </tr>
</tfoot>

Dynamic Content Handling

JavaScript can dynamically manipulate <tfoot> content. The following example demonstrates real-time updates to a total value:

<table id="dataTable">
  <tfoot id="summary">
    <tr><td>Total:</td><td id="total">0</td></tr>
  </tfoot>
</table>

<script>
  function updateTotal() {
    const cells = document.querySelectorAll('#dataTable tbody td:nth-child(2)');
    let sum = 0;
    cells.forEach(cell => sum += parseFloat(cell.textContent));
    document.getElementById('total').textContent = sum;
  }
</script>

Print Layout Optimization

In print stylesheets, you can ensure <tfoot> appears at the bottom of each page to improve readability for multi-page tables:

@media print {
  tfoot { display: table-footer-group; }
}

ARIA for Enhanced Accessibility

Adding role="rowgroup" improves accessibility for screen readers:

<tfoot role="rowgroup">
  <tr role="row">...</tr>
</tfoot>

Practical Use Cases

Financial Reports: Display quarterly totals and tax notes
Data Dashboards: Show real-time statistics
Product Lists: Present shopping cart totals
Grade Reports: Include class averages

<!-- E-commerce Order Example -->
<table>
  <tfoot>
    <tr>
      <td>Total Items</td>
      <td>3</td>
      <td>Grand Total</td>
      <td>¥599.00</td>
    </tr>
    <tr>
      <td colspan="4">Includes shipping: ¥15.00</td>
    </tr>
  </tfoot>
</table>