The <tfoot> tag in HTML is used to group the footer content of a table, typically summarizing or providing information about the data in the table. It works alongside <thead> (table header) and <tbody> (table body) to semantically organize tables.
📌 What Is the <tfoot> Tag?
- The
<tfoot>element wraps one or more rows (<tr>) that make up the footer section of the table. - Usually contains totals, summary data, or notes relevant to the table content.
- Improves accessibility and semantic structure of tables.
- Often rendered by browsers before
<tbody>for better progressive rendering.
✅ Basic Syntax
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$1.00</td>
<td>10</td>
</tr>
<tr>
<td>Oranges</td>
<td>$0.80</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>25</td>
</tr>
</tfoot>
</table>
🧩 Why Use <tfoot>?
| Benefit | Explanation |
|---|---|
| Semantic clarity | Separates footer rows from body and header |
| Accessibility | Screen readers recognize and announce footer separately |
| Better rendering | Browsers can render footer before the full body loads |
| Styling control | Allows targeting footer separately via CSS |
🎨 Styling <tfoot>
You can style the footer differently to distinguish it:
tfoot {
background-color: #f1f1f1;
font-weight: bold;
border-top: 2px solid #333;
}
⚠️ Important Notes
- The
<tfoot>element must appear before the<tbody>in HTML code for older browser compatibility, though browsers render it visually after the body. - Use
colspanto span footer cells across multiple columns. - Avoid putting non-footer rows inside
<tfoot>to keep semantic structure correct.
🏁 Summary
The <tfoot> tag is a semantic and structural element designed to group footer rows in a table. It enhances accessibility, improves rendering performance, and helps with styling table summaries or totals.