tfoot

Learn how to use the <tfoot> element to semantically group summary rows in HTML tables, ensuring accessibility and proper rendering order.

What it is

The <tfoot> element defines a set of rows summarizing the columns of a table. It typically contains totals, averages, or other aggregate data. While visually placed at the bottom of the table by default, browsers may render it differently depending on CSS or print settings. Semantically, it helps screen readers understand that these rows provide context for the entire dataset rather than individual records.

Related terms include <thead> (header rows) and <tbody> (main content rows). Together, they structure large tables for better readability and accessibility.

Why it matters

• Accessibility: Screen readers can announce summary information separately from data rows, improving navigation for users with visual impairments.
• Semantic Clarity: It explicitly marks which rows are summaries, making the code easier for developers to maintain and understand.
• Print Styling: Browsers often repeat <tfoot> content on every printed page if the table spans multiple pages, similar to <thead>.
• CSS Targeting: You can style summary rows distinctly using tfoot td selectors without affecting body cells.

Syntax or steps

Place the <tfoot> element inside the <table>. Although it appears last in the visual layout, HTML5 allows it to be placed anywhere within the table structure, though best practice is to place it after <tbody> for logical reading order. Each row inside <tfoot> uses standard <tr>, <th>, or <td> tags.

Example

<table>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1.00</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$0.50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Total</strong></td>
      <td><strong>$1.50</strong></td>
    </tr>
  </tfoot>
</table>

Explanation: The <thead> defines column headers. The <tbody> holds the actual product data. Finally, the <tfoot> contains a single row with two cells: one labeled "Total" and another showing the sum "$1.50". This structure ensures assistive technologies recognize the final row as a summary.

Common mistakes

• Placing <tfoot> before <tbody>: While technically valid in older specs, modern best practices recommend placing it after <tbody> to match visual flow and simplify maintenance.
• Using <div> instead: Never wrap table rows in non-table elements like <div>; this breaks table semantics and styling.
• Missing scope attributes: If you use <th> inside <tfoot>, ensure appropriate scope values (e.g., row) are used for clarity.
• Assuming fixed position: Do not rely solely on <tfoot> for sticky footers; use CSS position: sticky if persistent visibility during scrolling is required.

When to use it

Use <tfoot> when your table has meaningful aggregate data. Compare it with simply adding a styled row at the end of <tbody>:

Practice

Guided Exercise: Create a table listing three books with their prices. Add a <tfoot> row that displays the average price.

Challenge: Style the <tfoot> row so that its background color is light gray and text is bold. Verify that screen readers identify it as a footer section.

Quick check

Question: Does the browser automatically calculate totals inside <tfoot>?
Answer: No. You must manually enter the calculated values or generate them via JavaScript. The element only provides semantic grouping.

Summary

The <tfoot> element is essential for creating accessible, well-structured HTML tables with summary data. By separating totals from main content, you improve both user experience and developer maintainability.