The <table> Element
As defined in the HTML Living Standard, the <table> element represents data with more than one dimension, in the form of a table. It is a container for rows and cells that organize information into a grid.
| Element | Chrome | Safari | Firefox |
|---|---|---|---|
<dialog> |
Full | Full | Full |
<search> |
Full | Full | Full |
<ruby> |
Full | Partial | Full |
<table>
<caption>Employee List</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane Doe</td>
<td>001</td>
</tr>
</tbody>
</table>
View HTML Living Standard: The table element
Structural Components
A standard-compliant table utilizes several sub-elements to define its hierarchy:
<caption>: Provides the title for the table. Essential for orientation.<thead>,<tbody>,<tfoot>: Group rows into logical blocks (header, body, footer).<th>vs<td>: Use<th>for header cells and<td>for data cells.- The
scopeAttribute: Tells assistive technology if a header cell applies to arowor acol(column).
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Tables are purely visual grids unless correctly marked up. By using <th> with the scope attribute, you create a programmatic link between the header and the data. Screen readers will announce the associated header as the user moves between cells (e.g., "Chrome: Full"). Without this, users navigating large tables lose all context.
Layout Warning
A11y Tip: Tables for Data, Not Layout
Success Criterion 1.3.2 (Meaningful Sequence): When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Using tables to create page layouts (e.g., sidebars or multi-column text) is a violation of semantic standards. It creates a confusing reading order for assistive technologies and makes the site difficult to scale responsively. Use CSS Grid or Flexbox for layouts; use <table> only for 2D data sets.
Responsive Tables
Tables are notoriously difficult to display on mobile devices. Following SMACSS Module Rules, you should provide a container with overflow-x: auto to allow horizontal scrolling, or use "stacking" techniques where rows become cards on small screens.
.m-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}