The
<tfoot>tag in HTML defines the footer section of a table.
It is used to group rows that summarize or provide totals, notes, or other information related to the table data.
Typically,<tfoot>appears after<thead>and before<tbody>in the HTML source, though browsers visually render it at the bottom of the table.
Syntax
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer Content</td>
</tr>
</tfoot>
</table>Attributes
| Attribute | Description |
|---|---|
| (None) | The <tfoot> element has no specific attributes. You may use global attributes such as id, class, or style. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tfoot Tag Example</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
text-align: center;
}
thead {
background-color: #29AB87;
color: white;
}
tfoot {
background-color: #e0f3ec;
font-weight: bold;
color: #333;
}
th, td {
border: 1px solid #555;
padding: 10px;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>HTML Table with Tfoot Example</h2>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price (₹)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>50</td>
</tr>
<tr>
<td>Pencil</td>
<td>10</td>
</tr>
<tr>
<td>Eraser</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>₹65</td>
</tr>
</tfoot>
</table>
</body>
</html>Output
Browser Output
Displays a table with a footer row showing the total amount.
Even though the <tfoot> tag appears before <tbody> in the HTML source, browsers render it below the table body visually.
Please use our TryIt editor to view this behavior in action.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browsers, including IE9+, support the <tfoot> tag completely.
Notes
- The
<tfoot>section is optional but recommended for large tables with totals or summary data. - In HTML source order,
<tfoot>is placed before<tbody>for faster page rendering when tables are loaded. - Use CSS to style the footer differently from other table sections.
<tfoot>improves data comprehension and accessibility, especially in screen readers.
Conclusion
The <tfoot> tag defines the footer of a table, providing space for totals, summaries, or concluding remarks.
It helps organize table data more clearly while maintaining semantic meaning and consistent presentation.
