HTML <tfoot> Tag

What You’ll Learn

The <tfoot> tag groups footer rows in a table for totals, summaries, and metadata. This guide covers syntax, thead/tbody/tfoot structure, colspan, CSS styling, accessibility, and best practices for beginners.

What Is the <tfoot> Tag?

The <tfoot> tag is an HTML element used inside <table> to define the footer section of a table. It groups rows that summarize or provide context for the data in tbody, such as totals, subtotals, or copyright notes.

Footer rows visually appear at the bottom of the table even when you write tfoot before tbody in HTML5. For readability, many developers still place tfoot after tbody in source order.

📝 Syntax

Place tfoot inside table with tr rows containing summary cells:

<table>
  <thead>
    <!-- Table header rows -->
  </thead>
  <tbody>
    <!-- Main data rows -->
  </tbody>
  <tfoot>
    <!-- Footer / summary rows -->
  </tfoot>
</table>

Total Sales Example

<tfoot>
  <tr>
    <td colspan="2">Total Sales:</td>
    <td>$1,000,000</td>
  </tr>
</tfoot>

Syntax Rules

• tfoot must be a direct child of table (along with caption, colgroup, thead, and tbody).
• Only tr elements go directly inside tfoot.
• Use colspan on footer cells to span label text across columns.
• Use th in footer rows for summary labels like “Subtotal” or “Total”.
• A table may contain at most one tfoot element.

⚖️ <thead>, <tbody>, and <tfoot>

Examples Gallery

Table summaries, metadata footers, and subtotal rows with copy-ready code and live previews.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Units Sold</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>500</td>
      <td>$500,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total Sales:</td>
      <td>$1,000,000</td>
    </tr>
  </tfoot>
</table>

<tfoot>
  <tr>
    <td colspan="3">&copy; 2026 Your Company Name. All rights reserved.</td>
  </tr>
</tfoot>

<tfoot>
  <tr>
    <th colspan="2">Subtotal</th>
    <td>$15.00</td>
  </tr>
</tfoot>

♿ Accessibility

• Use th for summary labels — Footer labels like “Total” or “Subtotal” belong in th cells for clearer semantics.
• Pair tfoot with thead — Column headers in thead give context to footer totals.
• Keep footer content relevant — Totals and summaries should relate directly to the tbody data.
• Add a caption — A caption describes the whole table including its summary rows.
• Keep tables for data — Do not use tfoot in layout tables; it confuses assistive technologies.

💡 Best Practices