tfoot
The tfoot element groups footer rows of a table. Vanilla Breeze styles it with bold text, a raised background, and a medium top border to visually distinguish summary rows from data.
Description
The <tfoot> element contains one or more <tr> elements that form the footer of a table. Place it after <tbody> in the source for clarity -- browsers render it at the bottom regardless of source position.
Vanilla Breeze styles tfoot cells with font-weight: 600, a raised background (var(--color-surface-raised)), and a thicker top border (var(--border-width-medium)) 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 - Financial tables: Final totals, subtotals, tax lines
- Repeated footers: Printed tables can repeat tfoot on each page
When Not Needed
- Simple tables: Tables without summary data do not require tfoot
- Pagination controls: Navigation links belong outside the table, not in tfoot
Examples
Table with Totals
The shared basic table demo includes a tfoot with totals row, showing the raised background and top border that VB applies automatically.
<table> <caption>Quarterly Sales Report</caption> <thead> <tr> <th scope="col">Product</th> <th scope="col" data-numeric>Q1</th> <th scope="col" data-numeric>Q2</th> </tr> </thead> <tbody> <tr> <td>Widget A</td> <td data-numeric>$12,500</td> <td data-numeric>$15,200</td> </tr> <tr> <td>Widget B</td> <td data-numeric>$8,900</td> <td data-numeric>$9,500</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td data-numeric>$21,400</td> <td data-numeric>$24,700</td> </tr> </tfoot></table>Source Order
Historically, tfoot could be placed before tbody in HTML to let browsers start rendering the footer early. Modern browsers handle this automatically. Place tfoot after tbody for more readable source:
<table> <caption>...</caption> <colgroup>...</colgroup> <thead>...</thead> <tbody>...</tbody> <tfoot>...</tfoot> <!-- After tbody --></table>CSS Reference
Vanilla Breeze applies these styles to cells within tfoot:
/* VB default tfoot styles */tfoot td { font-weight: 600; background: var(--color-surface-raised); border-block-start: var(--border-width-medium) solid var(--color-border);}| Property | Value | Purpose |
|---|---|---|
font-weight |
600 |
Semi-bold to emphasize summary data |
background |
var(--color-surface-raised) |
Raised surface to distinguish from body rows |
border-block-start |
var(--border-width-medium) solid var(--color-border) |
Thicker border separating footer from body |
Accessibility
- Semantic grouping: Helps assistive technologies identify summary rows as distinct from data
- Implicit role: tfoot has an implicit ARIA role of
rowgroup - Navigation: Screen reader users can jump directly to the table footer
- Clear labels: Use descriptive text like "Total" or "Average" in the first cell of each footer row