Guide to accessible content

Tables

Page contents

Tables use a visual grid of horizontal rows and vertical columns to help explain relationships between pieces of data. They can also be helpful for presenting structured content.

Tables must be correctly formatted to ensure that people who can’t see the grid can still make sense of the contents.

Overview video: Introduction to accessible tables and a screen reader demo

Table captions

Label your tables

Screen readers will announce the caption before reading out the table contents, providing helpful context. All the example tables in the next section use the caption element. You can put a heading inside a caption.

Table structure

In left-to-right languages, screen readers traverse tables from left to right and from top to bottom.

Aim for a clear, logical structure

  • Keep tables as simple as possible by not splitting or merging cells.
  • Correctly format cells that are column and/or row headers – bold type and/or a larger font size isn’t sufficient for screen reader users.
  • Follow a ‘one cell, one item’ rule and don’t use line breaks.
  • Avoid empty cells – use ‘No data’ or ‘Not applicable’ instead.

How to format header cells

  • Use the table properties tools provided by your Content Management System (CMS) when working with tables.
  • Use the scope attribute on each header cell to associate a header cell with a column (col) or a row (row).

For a table with column headers the resulting HTML should look something like this:

<table>
	<caption>Descriptive title of table</caption>
	<tr>
		<th scope="col">Title of column 1</th>
		<th scope="col">Title of column 2</th>
	</tr>
	<tr>
		<td>First data in column 1</td>
		<td>First data in column 2</td>
	</tr>
	<tr>
		<td>Second data in column 1</td>
		<td>Second data in column 2</td>
	</tr>
</table>

For a table with row headers the resulting HTML should look something like this:

<table>
	<caption>Descriptive title of table</caption>
	<tr>
		<th scope="row">Title of row 1</th>
		<td>First data in row 1</td>
		<td>Second data in row 1</td>
	</tr>
	<tr>
		<th scope="row">Title of row 2</th>
		<td>First data in row 2</td>
		<td>Second data in row 1</td>
	</tr>
</table>

The HTML for a table with both column headers and row headers should look something like this:

<table>
	<caption>Descriptive title of table</caption>
	<tr>
		<td></td>
		<th scope="col">Title of column 1</th>
		<th scope="col">Title of column 2</th>
	</tr>
	<tr>
		<th scope="row">Title of row 2</th>
		<td>Data in row 1, column 1</td>
		<td>Data in row 1, column 2</td>
	</tr>
	<tr>
		<th scope="row">Title of row 3</th>
		<td>Data in row 2, column 1</td>
		<td>Data in row 2, column 2</td>
	</tr>
</table>

The Web Accessibility Initiative (WAI) has examples of more complex tables, but some people may find content easier to comprehend if it is split over multiple, simple tables.