Problematic Table Designs

Avoid designing tables in ways that make it difficult to understand the information and structure. Some common problematic table designs include:

• Ambiguous Data Relationships
• Nesting Data Tables
• Splitting and Merging Cells
• Expandable Rows and Mixing Data and Layout
• Separating the Head from the Body

Note: The following tables are intentionally inaccessible.

Ambiguous Data Relationships

The following fragment of a data table shows students which classes to take and how many credits each is worth:

The first data row, ENG 101, is very clear and the data relationships can be programmatically communicated and understood by non-visual users. However, the second data row is difficult to understand because a screen reader will first announce all the content of the first cell, then all the content in the second cell, then all the content in the third cell. The resulting screen reader output will be:

ENG 102 and ENG 102L hyphen or hyphen ENG 103 English 102 English 102 Lab English 103 3 1 4

A screen reader user would find it incredibly difficult to determine that English 103 is a 4-credit course. Despite having column and row headers correctly defined, the formatting and amount of data in the cells creates ambiguous relationships.

Nesting Data Tables

Some may try to solve the problem with the previous table by inserting a second table inside the first table, such as this:

This creates even more problems with structure as the header and data structures are even more complicated. 

Splitting and Merging Cells

Split and merged cells are common but can create accessibility problems. For example, the following table merges some cells to convey how classes span multiple hours and how lunch is at the same time across the whole week:

In this example, with the exception of the 8am hour, the relationship between times and classes can be difficult for screen reader users to understand, even on the web where there are techniques to attempt making these relationships programmatically clear. In other media, such as Word and Excel, there is simply no way to maintain the relationship between the headers and and the data cells.

Expandable Rows and Mixing Data and Layout

Mixing layout and data in the same table is also problematic. In the following example, click the name of a course to expose its description.

This mixes layout and data because the description field breaks the structure of headers and data cells. The new row that is injected does not have a clear structural relationship to the headers.

Separating the Head from the Body

On the web, developers sometimes create two different tables to make the table body scrollable while the header row remains fixed (a "sticky" header). The HTML code might look like this:

<table>
<caption>Course Credits</caption>
<thead>
  <tr>
     <th scope="col">Course</th>
     <th scope="col">Name</th>
     <th scope="col">Credits</th>
  </tr>
</thead>
</table>

<table>
<tbody>
  <tr>
     <th scope="row">ENG 101</th>
     <td>English 101</td>
     <td>3</td>
  </tr>
</tbody>
</table>

This clearly breaks the relationship between headers and data cells because the headers are in a different table from the data cells. There are ways to accomplish a sticky header accessibly. See the Sticky Table Headers page.