HTML <tfoot> Tag
Example
An HTML table with a <thead>, <tfoot>, and a <tbody> element:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Try it yourself »
Definition and Usage
The <tfoot> tag is used to group footer content in an HTML table.
The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
Browser Support
| Element | ||||||
|---|---|---|---|---|---|---|
| <tfoot> | Yes | Yes | Yes | Yes | Yes | Yes |
Tips and Notes
Note: The <tfoot> element must have one or more <tr> tags inside.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
Differences Between HTML 4.01 and HTML5
None of the HTML 4.01 attributes are supported in HTML5.
Attributes
| Attribute | Value | Description |
|---|---|---|
| align | right left center justify char |
Not supported in HTML5. Aligns the content inside the <tfoot> element |
| char | character | Not supported in HTML5. Aligns the content inside the <tfoot> element to a character |
| charoff | number | Not supported in HTML5. Sets the number of characters the content inside the <tfoot> element will be aligned from the character specified by the char attribute |
| valign | top middle bottom baseline |
Not supported in HTML5. Vertical aligns the content inside the <tfoot> element |
Global Attributes
The <tfoot> tag also supports the Global Attributes in HTML.
Event Attributes
The <tfoot> tag also supports the Event Attributes in HTML.
Default CSS Settings
Most browsers will display the <tfoot> element with the following default values:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
