Data Table

A data table is an HTML element that organizes information in rows and columns, where each cell maintains a logical relationship with its headers. Unlike a layout table (used to arrange elements visually), a data table requires semantic markup (tags <th>, scope attribute, <caption> element) so that screen readers convey the context of each value.

A screen reader navigates a table cell by cell, row by row. When it encounters "120 €", it cannot look up the column to understand what this amount represents. It needs the HTML code to tell it: "this cell belongs to column T1 and row North". This is the entire difference between a data table and a grid of silent cells.

#Data or layout: the distinction that changes everything

The RGAA devotes its topic 5 to tables and distinguishes two categories.

A data table contains information structured in two dimensions (columns and rows) where the relationships between cells have meaning. A pricing table, a schedule: these are data tables.

A layout table uses <table> only to arrange elements on the page. No logical relationship between rows and columns. The W3C/WAI recommends assigning it role="presentation" so that assistive technologies ignore it.

Confusing the two is the most common error. A layout table with <th> forces the screen reader to announce fictitious headers. A data table without <th> deprives the user of any context.

#Minimum markup

An accessible data table rests on three elements:

<table>
  <caption>Quarterly sales by region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>120 €</td>
      <td>145 €</td>
    </tr>
  </tbody>
</table>

<caption> identifies the table. <th> declares headers. scope specifies the direction (column or row). Without these three elements, the screen reader conveys orphaned values.

#The trap of the "visually correct" table

Many developers put their headers in <td> elements styled in bold. The visual rendering is identical. For a screen reader, these cells remain ordinary data cells. No association is created with the values below. As MDN clearly documents: it is HTML semantics, not CSS styling, that determines how assistive technologies behave.

#In summary

A data table has headers (<th> with scope), a title (<caption>), and no role="presentation". If your table doesn't need headers to be understood, it's probably a layout table, and it doesn't need to be a <table>.

Back to glossary

Share this article

Learn more

Complex data table

A complex data table is an HTML table whose headers do not cover an entire row or column, typically due to merged cells or sub-groups of headers. The scope attribute is no longer sufficient: each cell must be associated with its headers via id and headers attributes. When possible, splitting the table into several simple tables remains the best solution.

Table column or row header

In a data table, a column or row header is the cell that serves as a title for the other cells in that column or row. In HTML, it's the <th> tag that fulfills this role. Without it, a screen reader restores cells without context: the user hears values without knowing what they correspond to.

Layout Table

A layout table is an HTML <table> element misused for visual positioning of elements on a page. It contains no logical relationship between rows and columns. To prevent screen readers from announcing it as a real table, it must carry the attribute role="presentation" or role="none" and contain no semantic data table tags (<th>, <caption>, scope).