Tables

WCAG Standard 1.3.1 Information and Relationships (A)

Tables are used to organize data in a grid with columns and rows. Tables can supplement complex visuals like charts and infographics and may fulfill the need for text alternatives.

Some people can visually scan tables for meaning by looking at the columns and row headers. For individuals with visual or cognitive disabilities include the header information so that the screen reader will read the cell information and the associated column and row headers together.

Keep tables simple and avoid merging, splitting, and nesting cells. This will help screen reader users determine how data is related. Lastly, avoid using tables for presentation-only purposes. In other words, avoid using tables as a way to segment content on a web page or document.

Table Structure


Think about the relationships within your data. What points are you trying to make as you develop a table? Try to keep the table as simple as possible. Most authoring tools allow you to easily create tables and define headings in a simple WYSIWYG editor. In some cases, you may need to edit the HTML using the following tags:

<table>
<tr> (table row 1, contains headers)
<th>Column 1 </th> (table header)
<th>Column 2 </th>
</tr>
<tr> (table row 2, contains data)
<td>Cell 1 </td> (table cell)
<td>Cell 2 </td>
</tr>
</table>

Techniques for Tables

Table Headers


Be sure to use column headers and row headers that define the data they contain. Simply add the scope attribute to the <th> tag to define the header as a column or row:

<th scope=”col”>Column 1 </th>
<th scope=”row”>Row 1 </th>

You can also include a caption or title for the table. Simple add a <caption> tag between the <table> and first <tr> tags:

<table>
<caption>Caption text here </caption>
<tr>

Techniques for Table Headers

Resources