The <table> Element
As defined in the HTML Living Standard, the <table> element represents tabular data. It is the container for all other table-related elements, providing the structural context necessary for browsers and assistive technologies to interpret the data as a grid.
| Header 1 | Header 2 |
|---|---|
| Data 1.1 | Data 1.2 |
| Data 2.1 | Data 2.2 |
(The entire grid above is wrapped in a <table> element.)
<table>
<caption>Sample Data Table</caption>
<thead>...</thead>
<tbody>...</tbody>
</table>
View HTML Living Standard: Tables
Technical Requirements
A <table> must contain specific child elements to be semantically valid and accessible. While browsers are lenient, the following structure is the gold standard:
- Caption: Always include a
<caption>to provide a title. - Header/Body/Footer: Use
<thead>,<tbody>, and<tfoot>to logically group rows. - Rows and Cells: Data must be contained within
<tr>(rows) and<td>or<th>(cells).
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The <table> element is the foundation of this requirement for tabular data. By using a semantic table instead of a layout of <div>s, you ensure that screen readers can provide "Table Mode" navigation, allowing users to jump between cells and understand the relationship between a data point and its corresponding header.
Best Practices
- No Layout Tables: Never use
<table>for page layout. Use CSS Grid or Flexbox. Layout tables are a major accessibility barrier. - Keep it Simple: Avoid deeply nested tables. If your data is too complex for a single table, consider splitting it into multiple related tables.
- Responsive Design: Tables are notoriously difficult on mobile. Use
overflow-x: autoon a wrapper or a responsive stacking pattern.
A11y Tip: Table Summary
For extremely complex tables, a simple caption may not be enough. Consider providing a brief introductory paragraph before the table that explains how the data is organized, helping users build a mental map before they begin navigating the grid.