Skip to content
html.sh

<tfoot> - Table Footer Element

The <tfoot> Element

Section titled “The <tfoot> Element”
Table Element

The <tfoot> element represents a set of rows summarizing or providing supplementary information about the columns of a table. It typically contains totals, summaries, footnotes, or other concluding information. Like <thead>, the <tfoot> provides semantic structure that helps browsers and assistive technologies understand the table’s organization.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<table>
  <caption>Table caption</caption>
  <thead>
    <!-- header rows -->
  </thead>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>Sum value</td>
    </tr>
  </tfoot>
  <tbody>
    <!-- data rows -->
  </tbody>
</table>

Element Order

Section titled “Element Order”

The <tfoot> element should appear in this specific order:

  1. <caption> (optional)
  2. <colgroup> (optional)
  3. <thead> (optional)
  4. <tfoot> (optional)
  5. <tbody> (one or more)

Attributes

Section titled “Attributes”

Global Attributes

Section titled “Global Attributes”

The <tfoot> element supports all global HTML attributes.

Deprecated Attributes

Section titled “Deprecated Attributes”

Common Use Cases

Section titled “Common Use Cases”

Financial Totals

Section titled “Financial Totals”
Result

Statistical Summary

Section titled “Statistical Summary”
Result

Footnotes and References

Section titled “Footnotes and References”
Result

Benefits of Using <tfoot>

Section titled “Benefits of Using <tfoot>”

Semantic Clarity

Clearly indicates which rows contain summary or supplementary information.

Printing

Browsers can repeat the footer on each printed page for long tables.

Accessibility

Screen readers can identify and announce footer content appropriately.

Styling

Apply consistent styles to footer rows with a single CSS selector.

Fixed Footers

Create sticky footers that remain visible while scrolling.

Data Integrity

Keeps summaries and totals structurally separate from raw data.

Styling with CSS

Section titled “Styling with CSS”
Section titled “Bold Totals Footer”
Result
Section titled “Gradient Footer”
Result

Multiple Summary Rows

Section titled “Multiple Summary Rows”
Result
Section titled “Fixed Footer on Scroll”

Create a footer that stays visible while scrolling:

Result

Accessibility Best Practices

Section titled “Accessibility Best Practices”

Use Proper Scope

Section titled “Use Proper Scope”

Always use scope="row" for header cells in the footer:

<tfoot>
  <tr>
    <th scope="row">Total</th>
    <td>$500</td>
    <td>$600</td>
  </tr>
</tfoot>

Provide Context

Section titled “Provide Context”

Make sure footer content is self-explanatory:

<tfoot>
  <tr>
    <th scope="row">Grand Total (All Categories)</th>
    <td>$15,420</td>
  </tr>
</tfoot>

Common Patterns

Section titled “Common Patterns”
Section titled “Invoice Footer”
<tfoot>
  <tr>
    <th scope="row">Subtotal</th>
    <td>$100.00</td>
  </tr>
  <tr>
    <th scope="row">Shipping</th>
    <td>$10.00</td>
  </tr>
  <tr>
    <th scope="row">Tax</th>
    <td>$9.00</td>
  </tr>
  <tr class="total">
    <th scope="row">Total</th>
    <td>$119.00</td>
  </tr>
</tfoot>
Section titled “Statistical Footer”
<tfoot>
  <tr>
    <th scope="row">Mean</th>
    <td>85.3</td>
  </tr>
  <tr>
    <th scope="row">Median</th>
    <td>87.0</td>
  </tr>
  <tr>
    <th scope="row">Std. Deviation</th>
    <td>8.2</td>
  </tr>
</tfoot>
Section titled “Notes Footer”
<tfoot>
  <tr>
    <td colspan="3">
      <p><strong>Notes:</strong></p>
      <ul>
        <li>All prices in USD</li>
        <li>Shipping not included</li>
        <li>Prices subject to change</li>
      </ul>
    </td>
  </tr>
</tfoot>

CSS Styling Reference

Section titled “CSS Styling Reference”
/* Basic tfoot styling */
tfoot {
  background-color: #f8f9fa;
  font-weight: bold;
  border-top: 2px solid #333;
}


/* Bold totals */
tfoot {
  font-weight: 700;
  font-size: 1.1em;
}


/* Gradient footer */
tfoot {
  background: linear-gradient(to right, #4facfe, #00f2fe);
  color: white;
}


/* Multiple row differentiation */
tfoot tr:last-child {
  background-color: #2c3e50;
  color: white;
  font-size: 1.2em;
}


/* Fixed footer */
tfoot {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  z-index: 10;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}


/* Separation from tbody */
tfoot {
  border-top: 3px double #333;
}
Section titled “Print Behavior”

For long tables that span multiple pages when printed:

@media print {
  thead {
    display: table-header-group;
  }


  tfoot {
    display: table-footer-group;
  }


  tbody {
    display: table-row-group;
  }
}

Best Practices

Section titled “Best Practices”

Do’s

Section titled “Do’s”
  • ✅ Use for summaries and totals - perfect for aggregated data
  • ✅ Place before <tbody> in HTML source code
  • ✅ Use <th> with scope="row" for footer labels
  • ✅ Keep styling consistent with the rest of the table
  • ✅ Provide clear context for summary information
  • ✅ Consider multiple rows for complex summaries

Don’ts

Section titled “Don’ts”
  • ❌ Don’t use for non-summary content - keep it relevant to the data
  • ❌ Don’t omit for financial tables - totals are important
  • ❌ Don’t use deprecated attributes - use CSS instead
  • ❌ Don’t make it visually identical to tbody - differentiate it
  • ❌ Don’t forget accessibility - use proper scope attributes

When to Use <tfoot>

Section titled “When to Use <tfoot>”

Financial Data

Perfect for displaying totals, subtotals, and grand totals in financial tables.

Statistical Tables

Show averages, medians, or other statistical summaries.

Footnotes

Add explanatory notes, disclaimers, or data source information.

Multi-page Tables

Repeat summary information on each printed page.

Browser Support

Section titled “Browser Support”

The <tfoot> element is supported in all browsers:

  • ✅ Chrome (all versions)
  • ✅ Firefox (all versions)
  • ✅ Safari (all versions)
  • ✅ Edge (all versions)
  • ✅ Opera (all versions)
  • ✅ Internet Explorer (all versions)
Section titled “Related Elements”

Specifications

Section titled “Specifications”