Tables

Table Summary

Provide a summary for your table to convey the context or conclusion of the table data (what is the table portraying) to assistive tech users. This is accomplished by adding a summary attribute to the table tag:

<table summary="List of Scholarship Sources" border="1">

Table headings and scope attribute

Use the <th> tag to designate the table headings. The scope attribute is used to further define the row and column headings for your data table, greatly assisting in the navigation of a table. When a screen reader user moves to a particular table cell, the screen reader can announce to the user what row and column headings are associated with that cell. The following example illustrates how to correctly define table headings:

<table summary="Cardinals are larger and more colorful than sparrows" border="1">
  <tr>
    <th scope="col">Bird</th>
    <th scope="col">Size</th>
    <th scope="col">Color</th>
  </tr>
  <tr>
    <th scope="row">Cardinal</th>
    <td>21 cm</td>
    <td>vibrant red</td>
  </tr>
  <tr>
    <th scope="row">Sparrow</th>
    <td>16 cm</td>
    <td>dull brown</td>
  </tr>
</table>

The code above displays the following table:

Bird	Size	Color
Cardinal	21 cm	vibrant red
Sparrow	16 cm	dull brown

Keep it simple

While it is possible to code more complex data tables, you cannot be sure that all screen readers will parse them correctly. The safest plan is to stick to one- or two-dimensional tables, avoiding coding tables with more than two Levels of row and column headers and avoiding spanning rows or columns. Simple table layouts also benefit low-vision users and those with cognitive disabilities. Simple table layouts also benefit able-bodied users—the truth is that tables are difficult for all of us to read on the web.

View more information about creating accessible tables.