The <tbody> Element
As defined in the HTML Living Standard, the <tbody> element represents a block of rows that consist of the body of the data for the parent <table> element.
| Criterion | Requirement |
|---|---|
| 1.3.1 | Info and Relationships |
| 2.1.1 | Keyboard Accessible |
<table>
<thead>...</thead>
<tbody>
<tr>
<td>Data Point 1</td>
<td>Data Point 2</td>
</tr>
</tbody>
</table>
View HTML Living Standard: The tbody element
Structural and Semantic Role
The <tbody> element is part of the table sectioning model. While a table can exist with just <tr> tags, using <tbody> provides several technical advantages:
- Clear Boundaries: It explicitly separates data rows from header (
<thead>) and footer (<tfoot>) rows. - Multiple Bodies: A single table can contain multiple
<tbody>elements. This is useful for grouping related sets of data within a large table (e.g., separating data by month or department). - Implicit Tbody: If you do not include a
<tbody>, browsers will automatically inject one into the DOM to wrap your<tr>elements. Being explicit is better for maintainability.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By grouping data rows within <tbody>, you help user agents and assistive technologies parse the table structure correctly. This is especially important for long tables. Some browsers or printer drivers use this tagging to repeat header rows (<thead>) at the top of each new page while keeping the <tbody> content continuous, ensuring the relationship between headers and data remains perceivable.
Styling with SMACSS
The <tbody> element provides a useful hook for applying styles to the "data" portion of a table without affecting the headers or footers.
- Zebra Striping: You can apply nth-child background colors to the rows specifically within the
<tbody>. - Scrollable Bodies: For very large datasets, developers often set a
max-heightandoverflow-y: autoon a container wrapping the table, but the<tbody>is the semantic target for the scrolling content.
/* Example Zebra Striping for Tbody Rows */
.m-table tbody tr:nth-child(even) {
background-color: #f1f5f9;
}
A11y Tip: Logical Grouping
If a table contains hundreds of rows, using multiple <tbody> elements to group data (e.g., one for each category) can help screen reader users navigate "chunks" of data more effectively, reducing the cognitive load of a single massive list.