HTML <tfoot> Tag
The <tfoot> tag defines the footer of the table. Is used together with the <thead> and <tbody> elements. See examples.
The <tfoot> tag defines the footer of an HTML table. It is used together with the <thead> and <tbody> elements, which group the header and the body rows of the table respectively.
The footer is the natural place for column totals, sums, averages, or other summary rows that aggregate the data in the body. Grouping these rows with <tfoot> instead of a plain <tr> gives the table clear semantic structure, which helps assistive technology describe the table to screen-reader users.
Why use <tfoot> ?
- Semantics and summaries. The footer signals "these rows summarize the table" — totals, subtotals, counts, or notes. Often a single
<th>or<td>spans the full width withcolspan. - Print and scroll behavior. When a long table is printed across several pages, some user agents repeat the
<thead><tfoot>overflow), the footer can stay fixed at the bottom. - Accessibility. Explicit header / body / footer groups give screen readers a more meaningful structure than a flat list of rows.
Where does <tfoot> go?
The <tfoot> tag must be declared inside the <table> element, after the <caption> and <colgroup> (if any) elements.
In HTML5, <tfoot> may appear either before or after <tbody> in the source code. The old HTML4 rule that required <tfoot> to come before <tbody> is obsolete. Either way, browsers always render the footer at the bottom of the table, so placing it last (right after the body) is the most readable choice.
The <tfoot> tag must contain at least one <tr> tag.
The <thead> , <tbody> , and <tfoot> elements do not affect the layout of the table by default. Use CSS properties to customize the look of the table.
Syntax
The <tfoot> tag comes in pairs. The content is written between the opening ( <tfoot> ) and closing ( </tfoot> ) tags.
HTML <tfoot> Tag
<table>
<thead> ... </thead>
<tbody> ... </tbody>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
</table>Example with a totals row
This example uses <thead> , <tbody> , and <tfoot> together. The footer holds a summary row that totals the body's values:
<!DOCTYPE html>
<html>
<head>
<title>tfoot totals row</title>
<style>
table { width: 360px; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
tfoot td { font-weight: bold; background-color: #f2f2f2; }
</style>
</head>
<body>
<table>
<caption>Monthly Sales</caption>
<thead>
<tr>
<th>Product</th>
<th>Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboards</td>
<td>40</td>
</tr>
<tr>
<td>Mice</td>
<td>35</td>
</tr>
<tr>
<td>Monitors</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>
</body>
</html>Notice that <tfoot> is written after <tbody> in the source, yet the footer still renders at the bottom — exactly where you read it.
Structuring complex tables
Use the <thead> , <tbody> , and <tfoot> elements to organize tables that contain large or complex data sets. They make the source easier to read, let you style each section independently, and improve accessibility. To enable independent scrolling of the body while keeping the header and footer visible, apply CSS overflow properties to <tbody> .
Attributes
| Attribute | Value | Description |
|---|---|---|
| align | right, left, center, justify, char | Sets horizontal alignment of the content inside the <tfoot> element. This attribute is not supported by HTML5. |
| bgcolor | bgcolor | Sets the background color of the rows inside the <tfoot> element. This attribute is not supported by HTML5. |
| char | character | Specifies the alignment of the content inside the <tfoot> element to a character. Is used only when the attribute align="char". This attribute is not supported by HTML5. |
| charoff | number | Specifies the number of characters the content inside the <tfoot> element will be aligned from the character specified by the char attribute. Is used only when the attribute align="char". This attribute is not supported by HTML5. |
| valign | top, bottom, middle, baseline | Specifies a vertical alignment of the content inside the <tfoot> element. This attribute is not supported by HTML5. |
Note: All attributes listed above are deprecated in HTML5. Use CSS instead. The table below shows the modern replacement for each one:
| Deprecated attribute | CSS replacement |
|---|---|
align | text-align |
valign | vertical-align |
bgcolor | background-color |
The <tfoot> tag also supports the Global Attributes and the Event Attributes.
How to style an HTML <tfoot> tag
tfoot {
background-color: #f2f2f2; /* replaces bgcolor */
font-weight: bold;
text-align: right; /* replaces align */
vertical-align: middle; /* replaces valign */
}See the CSS Tables chapter for more ways to style table sections.