tbody
The tbody element groups body rows of a table. Vanilla Breeze adds a hover highlight on rows and supports a striped variant for easier scanning.
Description
The <tbody> element contains one or more <tr> elements that make up the data portion of a table. It should appear after <thead> and before <tfoot> in the source order.
Vanilla Breeze applies a hover highlight on tbody tr rows using var(--color-surface-raised), and supports a .striped variant that applies alternating background colors to odd rows for easier row tracking.
When to Use
- Every data table: All tables should use tbody to group data rows
- Multiple tbody sections: Group related rows for visual or semantic separation (e.g., by department or category)
- Dynamic content: JavaScript can target tbody directly for adding or removing rows without touching headers or footers
Examples
Basic Table with tbody
A complete table structure with <thead>, tbody, and <tfoot>. Hover over rows to see the built-in highlight.
<table> <caption>Quarterly 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>Striped Rows
Add class="striped" to the <table> element. VB alternates backgrounds on odd rows within tbody, making it easier to track data across wide tables.
<table class="striped"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>Project Alpha</td> <td>Active</td> </tr> <tr> <td>002</td> <td>Project Beta</td> <td>Planning</td> </tr> <!-- More rows... --> </tbody></table>Row States
tbody rows can carry state information for visual indicators like selection or status.
Density
Adjust cell padding for compact or spacious tables.
CSS Reference
Vanilla Breeze applies these styles to rows within tbody:
/* VB default hover state */tbody tr:hover { background: var(--color-surface-raised);} /* Striped variant — add .striped to the table */table.striped tbody tr:nth-child(odd) { background: var(--color-surface-raised);}| Selector | Property | Purpose |
|---|---|---|
tbody tr:hover |
background: var(--color-surface-raised) |
Highlights the row under the pointer for easier scanning |
table.striped tbody tr:nth-child(odd) |
background: var(--color-surface-raised) |
Alternating row backgrounds for dense data tables |
Accessibility
- Structural separation: Helps assistive technologies distinguish data from headers and footers
- Implicit role: tbody has an implicit ARIA role of
rowgroup - Row headers: When rows have their own headers, use
<th scope="row">in the first cell - Row navigation: Screen readers can navigate between different table sections (thead, tbody, tfoot)
Related
<table>- Parent container<tr>- Table rows within tbody<td>- Data cells (primary content of tbody)<th>- Row headers (usescope="row"inside tbody)<thead>- Header row group (appears before tbody)<tfoot>- Footer row group for summaries and totals<data-table>- Enhanced table component with sorting, filtering, and pagination