The <tr> Element
As defined in the HTML Living Standard, the <tr> (Table Row) element represents a row of cells in a table. It acts as the container for either <th> (header cells) or <td> (data cells).
| City | Population |
|---|---|
| New York | 8.4M |
| London | 8.9M |
(Each horizontal line of data is wrapped in a <tr> element.)
<tr>
<th>City</th>
<th>Population</th>
</tr>
View HTML Living Standard: The tr element
Technical Rules & Hierarchy
- Placement: The
<tr>must be a child of<thead>,<tbody>, or<tfoot>. - Content: It can only contain
<th>or<td>elements. Placing other elements (like<div>) directly inside a<tr>is a semantic error. - Row Spanning: While the
<tr>defines the row, therowspanattribute is actually placed on the<td>or<th>to make a cell extend across multiple rows.
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 primary unit of navigation for screen reader users in a table. When a user moves from one row to the next, the screen reader uses the <tr> boundary to reset its position and often re-announces the row header (if provided), ensuring the user never loses their place in the dataset.
Best Practices
- Consistent Cell Count: Ensure every
<tr>in your table has the same number of cells (unless usingcolspanorrowspan). Inconsistent cell counts can break the table's accessibility tree. - Avoid Empty Rows: Do not use empty
<tr>elements for visual spacing. Use CSS margins or padding on the table or cells instead. - Zebra Striping: Use the CSS
:nth-child(even)selector on<tr>elements to improve readability for users with low vision.
A11y Tip: Row Headers
If the first cell of a row identifies the rest of the data in that row, make that cell a <th scope="row">. This transforms the row from a simple list of data into a structured relationship, which is a key requirement for complex table accessibility.