Data Tables

9 minute read

Last updated: Feb 23, 2026

Summary

Tables are a useful way of presenting large amounts of data to people and indicating relationships between the data. The rows and columns of a table’s visual structure help people scan large amounts of information, quickly find what they need, and understand what they find.

People using assistive technologies rely on correctly formatted and coded tables to understand the table’s structure. Correct formatting lets someone who cannot see a table know that the information in row 20, column 3 is Jim’s phone number and not a random series of numbers.

Overview

Data tables are a great way to:

Compare large amounts of related groups (sets) of data.
Show the relationships between multiple sets of data.
Find and compare specific values across categories.
Help people filter out irrelevant information.
Help people navigate large collections of data.
Speed up scanning and reduce repetition of information.

Don’t use tables for:

Only one or two items; put them in the text instead.
Items in a series; use a list instead.

Well-formatted tables can efficiently present information about hundreds of related data records, making it easier to understand and analyze large amounts of data. This clarity is essential for people with cognitive and learning disabilities that impact reading skills. Information in a well-structured table is much easier to understand than reading the same information in a paragraph.

Sighted users can quickly scan tables to understand their structure and the relationships between data in the table cells. People using assistive technologies rely on correctly formatted tables to communicate this information to users. Incorrectly formatted tables prevent people using assistive technology from effectively navigating the table and add barriers to their understanding of its contents.

The method used to format tables will change based on the medium. For example, defining the table layout in a document is very different from coding a table for a website. However, the underpinning guidelines for correctly formatting a table remain the same:

Use tables for data, not for layout.
Choose simple tables over more complex ones.
Have either a row header, a column header, or both.
Use descriptive table headers.
Use captions to describe the table’s purpose.
Use summaries to describe the table’s structure.
Use visual styles to reinforce the table’s structure.

Who is Helped?

People with cognitive and learning disabilities that impact reading skills can often scan and understand the information in a table more easily than reading the same information in the text.

People who use assistive technologies, such as screen readers, can navigate tables and understand the relationship between the contents of cells. When a screen reader encounters a correctly formatted table, it announces:

The table caption (if present).
Information about the table structure. For example: ‘Table with four columns and ten rows.’

When navigating through the table, the screen reader announces:

The contents of cells, along with the information in the corresponding header cell.
For example, NVDA announces the second row of the below table as

Name - Ezi Magbegor, Height -193cm, Team -Seattle Storm.

Name Height Team
Ezi Magbegor 193cm Seattle Storm

Name	Height	Team
Ezi Magbegor	193cm	Seattle Storm

Watch Leonie Watson’s short video, How screen readers navigate data tables, for more information.

Guidelines

Correctly coded tables ensure that the information conveyed to people using assistive technologies is the same as what others receive. When tables do not have the correct markup in their code, people using assistive technology cannot effectively navigate the table and will face barriers to understanding its contents. Only use tables to display data, not for layout purposes. Layout tables are unnecessary and can confuse people using assistive technology.

The following rules apply to all data tables:

Tables must contain either a row header, column header, or both.
Contents in header cells must be descriptive.

It is also best practice to:

Add a caption to provide a visible label and accessible name for the table.
Avoid or simplify complex tables.
Add a summary to complex tables, providing information on the table’s structure.
Avoid nested tables.
Avoid absolute sizing and let the browser determine the table size.
- If table size is defined, use relative and not fixed sizing.
- For example, use percentages rather than pixels to define sizing.
Apply visual styling with CSS to assist sighted users.
- For example, use CSS to apply a background color to table headers to differentiate them from data cells.

How to Structure Simple Data Tables

Declare data tables with a <table> element.
A <caption> is optional but recommended. Captions act as a title and accessible name for the table.
- A <caption> should directly follow the <table> element.
Declare table rows with the <tr> element.
Declare table headers with the <th> element.
Declare table cells with the <td> element.

<table>
  <caption></caption>
  <tr>
      <th></th>
      <th></th>
  </tr>
  <tr>
      <td></td>
      <td></td>
  </tr>
</table>

Column and Row Headers

A data table must contain either a row header, column header, or both. The data in table headers must accurately describe the content in the corresponding cells.

Header cells are marked up using the <th> element and <scope> attribute.

Give the scope attribute a value of either:

“col” to define a column header. A “col” value tells the screen reader that everything in the column is related to the column header.
- Code example: <th scope=”col”>
“row” to define a row header. A “row” value tells the screen reader that everything in the row is related to the row header.
- Code example: <th scope=”row”>

TV Show	Platform	Release date
Buffy	Netflix	1997
Six Feet Under	HBO	2000

<table>
   <tr>
      <th scope="col">TV Show</th>
      <th scope="col">Platform</th>
      <th scope="col">Release date</th>
   </tr>
   <tr>
      <td>Buffy</td>
      <td>Netflix</td>
      <td>1997</td>
   </tr>
   <tr>
      <td>Six Feet Under</td>
      <td>HBO</td>
      <td>2000</td>
   </tr>
</table>

Example 1: Column Headers (Table and Code)

Correctly coded table headers ensure people using assistive technologies, like a screen reader, can understand the relationship between the contents of each table cell and its associated header. When reading the table with column headers in Example 1 above, a screen reader will announce the column header along the contents of the table cell whenever a user navigates from one column to another.

For the table in Example 1, a screen reader will announce the second row as “Show, Buffy. Platform, Netflix, Release Date, 1997” as it reads through the second row. However, when the user moves from one row to another - from “Netflix” to “HBO,” for example - only the contents of the table cell are announced because the column header has not changed, and there are no row headers in this example.

TV Show	Platform	Release date
Buffy	Netflix	1997
Six Feet Under	HBO	2000

<table>
   <tr>
      <th scope="col">TV Show</th>
      <th scope="col">Platform</th>
      <th scope="col">Release date</th>
   </tr>
   <tr>
      <th scope="row">Buffy</th>
      <td>Netflix</td>
      <td>1997</td>
   </tr>
   <tr>
      <th scope="row">Six Feet Under</th>
      <td>HBO</td>
      <td>2000</td>
   </tr>
</table>

Example 2: Column and Row Headers (Table Only - No Caption)

The table in Example 2 has both column and row headers. The screen reader announces the column header if you move from one column to another or the row header if you move from one row to another. Now, when a screen reader user moves from “Netflix” to “HBO,” they will hear “Six Feet Under, HBO.”

Table Captions

The caption element is optional but strongly recommended as it defines the purpose of the table’s data for the user. A caption is rendered as text and is accessible to all users. A visible text caption can be helpful for some people with cognitive disabilities as a wayfinding aid. Additionally, it assists people using screen readers as they can use the caption as a primary method of navigating through the tables on a page. Users can then make an informed decision about whether the table contains relevant information for them.

The caption should be the direct child of the <table> element and act as a ‘heading’ for the table.
Where there are multiple tables on a page, captions should be unique to help users differentiate between them.

Most popular TV shows 1995 to 2005
TV Show	Platform	Release date
Buffy	Netflix	1997
Six Feet Under	HBO	2000

<table>
   <caption> Most popular TV shows 1995 to 2005 </caption>
   <tr>
      <th scope=”col”>TV Show</th>
      ...
   </tr>
</table>

Example 3: Adding A Unique Caption (Table and Code)

Complex data tables

Avoid complex tables where possible; break complex tables down into multiple simple tables. Assistive technology and browser support for complex tables varies, and is generally more challenging for all users to interpret.

If a complex table is needed, refer to the information in Complex Data Tables.

Layout tables

Avoid the use of layout tables when possible. If a layout table is used:

It must not contain any header rows.
It should use an ARIA role to hide the fact that it is a table.

See Layout Tables for more information if layout tables are used.

How to Test

Test Using an Automated Test Tool

Identify all instances of the <table> element. You can use accessibility test tools like ANDI, WAVE, or a tables bookmarklet to test tables for accessibility.

See WAVE and ANDI (Ta11y) for more information on using these tools.

Determine whether the table is a data table or a layout table.

For data tables:
- Check that table headers <th> have been marked up in the code.
- Check that the headers accurately describe the associated row or column cell data content.
- Check that table headers <th> contain the <scope> attribute.
- Check for a table <caption>. If present, check that it accurately describes the table contents. Note that this is a best practice and not a WCAG requirement.
See Layout Tables for information on testing layout tables.

Screenshot of ANDI Table Test Results showing Table Markup added to a table on the web page. Following text has a full description. — Figure 1: ANDI Table Test Results showing Table Markup

In an example from this page in Ta11y.org, markup has been added to each table cell indicating if it is a “th” or “td” cell. The ANDI output for the selected table cell is “Platform | Netflix,” which includes both the column’s table header and the contents of the selected table cell.

Listen to tables with a screen reader.

Can you navigate through the table cells correctly?
Does the screen reader announce the contents of each cell as you move through the table, along with the appropriate table headers?
Is the table’s caption announced correctly, if present?

If there are problems with how a screen reader announces a table, it may indicate an error in the code. Take another look at the source code to determine the error.