The <td> Element
As defined in the HTML Living Standard, the <td> element represents a data cell in a table. It is used to contain any type of flow content—text, images, links, or even other tables—that makes up the primary information of a dataset.
| User ID | Status |
|---|---|
| SA-001 | Active |
| SA-002 | Pending |
(The highlighted cell above is a <td> element.)
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
View HTML Living Standard: The td element
Technical Attributes
colspan: Specifies the number of columns the cell should span. Must be a non-negative integer.rowspan: Specifies the number of rows the cell should span.headers: A list of space-separated IDs of<th>elements that provide headers for this cell. This is critical for complex table accessibility.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
For simple tables, browsers automatically link a <td> to the <th> elements in its row or column. However, for complex tables with nested headers or multi-level relationships, the automatic association often fails. In these cases, you must use the headers attribute on the <td> to explicitly link the data to its corresponding categories. This ensures screen reader users hear the correct context as they move from cell to cell.
Best Practices
- TD vs. TH: Use
<th>for any cell that labels data (headers) and<td>for the actual data values. - Consistent Alignment: Following SMACSS Base Rules, numerical data in
<td>cells is often easier to scan when right-aligned, while text data is usually left-aligned. - Handling Empty Cells: Never use a space or a
<br>to represent "no data." If a cell is empty, leave the<td></td>tags empty or use a dash with a hidden text alternative (e.g.,<td>— <span class="sr-only">No data available</span></td>).
A11y Tip: Responsive Stacking
In mobile views where tables "stack" (turning rows into cards), use the data-label attribute on the <td> and CSS generated content (::before) to replicate the header labels visually. This ensures the Info and Relationship remains perceivable even when the grid structure is removed.