The <tr> Element
As defined in the HTML Living Standard, the <tr> element represents a row of cells in a table. It acts as the container for either header cells (<th>) or data cells (<td>).
| Element | Role |
|---|---|
<tr> |
Row Container |
<td> |
Data Cell |
(The highlighted region above is a single <tr>.)
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
View HTML Living Standard: The tr element
Structural Requirements
- Strict Parentage: A
<tr>element must be a child of<thead>,<tbody>,<tfoot>, or directly within a<table>. - Children: It may only contain
<th>and<td>elements (and script-supporting elements like<template>). - Empty Rows: While technically valid, rows with no cells should be avoided as they create "gaps" in the accessibility tree and document structure.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The <tr> element is the programmatic anchor for horizontal relationships in a table. Assistive technologies use the row structure to calculate the table's dimensions. For a screen reader user, the browser announces the row count (e.g., "Row 2 of 5") as they navigate. This allows users to maintain their orientation within a dataset—a critical relationship that is conveyed to sighted users via visual alignment.
Styling for Scannability
Following SMACSS Module Rules, table rows are often styled to improve data scannability for all users.
- Zebra Striping: Using the
:nth-child(even)pseudo-class on<tr>helps users track data across wide rows, which is particularly helpful for users with low vision or cognitive disabilities. - Hover States: Highlighting the current row on hover provides a clear visual anchor, satisfying the intent of WCAG SC 2.4.7 (Focus Visible) for mouse and touch users.
/* Zebra Striping Example */
tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Hover Highlight Example */
tr:hover {
background-color: #e2e8f0;
}
A11y Tip: Logical Reading Order
Never use <tr> elements to create a layout that differs from the logical reading order. Screen readers follow the DOM order of the rows; if the visual layout suggests a different sequence, the Info and Relationship requirement is failed.