The <tfoot> element groups a table's summary or closing row(s) — totals, averages, or notes about the data above.
Syntax
<tfoot>
<tr><td>Total</td><td>180</td></tr>
</tfoot>Basic Example
<table>
<thead>
<tr><th>Item</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Course Fee</td><td>₹40,000</td></tr>
<tr><td>Study Material</td><td>₹5,000</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>₹45,000</td></tr>
</tfoot>
</table>Browser output: a normal-looking final row — visually often identical to a <tbody> row unless styled differently with CSS, but structurally marked as a summary.
How It Works
Interestingly, <tfoot> can be placed in the HTML source either before or after <tbody> — some browsers historically rendered a <tfoot> written before the body rows at the visual bottom anyway, which was useful for very long tables so the summary row could render (and print) without waiting for all data to load.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none special — | Only universal global attributes apply |
Real-World Example
<tfoot>
<tr>
<td>Average</td>
<td>88.5</td>
</tr>
</tfoot>An invoice or marks table's footer showing a calculated total or average — genuinely summary information, distinct from any individual data row above it.
Common Mistakes
- Using
<tfoot>for a row that's actually just more data, rather than a genuine summary/total - Including more than one
<tfoot>in a table — only one is allowed, like<thead>
Best Practices
- Reserve
<tfoot>specifically for genuine summary content — totals, averages, footnotes about the data - Style it visually distinct from regular data rows (e.g. bold, a top border) so its summary role is clear to sighted users too
Accessibility Considerations
Correctly marking summary rows as <tfoot> helps screen reader users distinguish "this is a total" from "this is one more data point," which matters for correctly interpreting the table.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Modern browsers consistently render <tfoot> at the bottom of the table regardless of its position in the source, so writing it after <tbody> (matching normal reading order) is the clearest, most common modern convention.
Mini Practice
- Add a
<tfoot>row showing a total to the invoice example above. - Style that
<tfoot>row with bold text and a top border using CSS.
Module 6 Practice Lab (Part 1)
Quick Practice
Build a complete table with <caption>, <thead>, <tbody>, and <tfoot> for a simple 3-item shopping cart with a total row.
