The <td> Element
As defined in the HTML Living Standard, the <td> (Table Data) element represents a data cell in a table. It is used to contain the actual information—text, images, links, or even other tables—that makes up the primary dataset.
| User ID | Status |
|---|---|
| SA-001 | Active |
| SA-002 | Pending |
(The cells "SA-001", "Active", etc., are <td> elements.)
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
View HTML Living Standard: The td element
Technical Attributes
While <td> elements are primarily for content, they support several critical attributes for structural control:
- colspan: Specifies the number of columns the cell should span.
- 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.
Best Practices
- TD vs. TH: Use
<th>for any cell that labels data (headers) and<td>for the actual data values. Never use<td>for a header. - 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>). - Avoid Over-nesting: While you can put a table inside a
<td>, this often creates an accessibility nightmare. Try to flatten your data structure whenever possible.
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.