tfoot
The tfoot element groups the footer row(s) of a table. It typically contains summary data, totals, or aggregate information calculated from the table body.
Description
The <tfoot> element contains one or more <tr> elements that form the footer of a table. While it can appear after <thead> and before <tbody> in the HTML, browsers will render it at the bottom of the table.
Vanilla Breeze styles tfoot cells with a raised background, bold text, and a thicker top border to visually distinguish summary rows from data rows.
When to Use
- Summary totals: Sum, average, or count of column values
- Aggregate data: Calculated values derived from tbody data
- Table conclusions: Final remarks or totals for financial/statistical tables
- Repeated footers: Printed tables can repeat tfoot on each page
When Not Needed
- Simple tables: Tables without summary data don't require tfoot
- Navigation links: Pagination or table controls should be outside the table
Basic Example
Use tfoot to display totals or summary information.
| Product | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Widget A | $12,500 | $15,200 | $14,800 | $18,000 |
| Widget B | $8,900 | $9,500 | $10,200 | $11,800 |
| Widget C | $6,200 | $7,100 | $6,800 | $8,500 |
| Total | $27,600 | $31,800 | $31,800 | $38,300 |
Multiple Footer Rows
Use multiple rows in tfoot for different aggregate calculations.
| Category | Budget | Actual | Variance |
|---|---|---|---|
| Marketing | $50,000 | $48,500 | $1,500 |
| Development | $120,000 | $125,000 | -$5,000 |
| Operations | $80,000 | $78,200 | $1,800 |
| Subtotal | $250,000 | $251,700 | -$1,700 |
| Tax (10%) | $25,000 | $25,170 | -$170 |
| Grand Total | $275,000 | $276,870 | -$1,870 |
Statistical Summaries
Display multiple statistics like count, sum, average in the footer.
| Student | Test 1 | Test 2 | Test 3 |
|---|---|---|---|
| Alice | 92 | 88 | 95 |
| Bob | 78 | 82 | 80 |
| Carol | 85 | 90 | 88 |
| Average | 85 | 86.7 | 87.7 |
Styling
Vanilla Breeze applies these styles to cells within tfoot:
| Property | Value | Purpose |
|---|---|---|
font-weight |
600 |
Semi-bold to emphasize summary data |
background |
var(--color-surface-raised) |
Subtle background to distinguish from body |
border-block-start |
var(--border-width-medium) |
Thicker border separating footer from body |
border-block-end |
none |
No bottom border on footer cells |
Source Order
Historically, tfoot could be placed before tbody in the source to allow browsers to render it before loading all data. Modern browsers handle this automatically, so place tfoot after tbody for clearer code:
Accessibility
- Semantic grouping: Helps assistive technologies identify summary rows
- Navigation: Screen reader users can jump directly to the table footer
- Implicit role: tfoot has an implicit ARIA role of
rowgroup - Clear labels: Use descriptive text like "Total" or "Average" in the first cell