Tables
Learn About 
- The difference between tables used for layout and data tables.
- Best practices for creating accessible tables.
- The importance of structurally identifying row headers, column headers and the data cells to which they correspond.
- Creating accessible tables using the Rich Content Editor.
HTML tables come in two basic flavors: layout tables and data tables. Tables were originally developed for the presentation of tabular data. Subsequently, tables began being used for layout in order to overcome HTML limitations around visual presentation and layout.
Layout Tables
Layout tables possess neither row or column headers, nor are there direct relationships between or among cells. The content reading/tab order for screen reader and keyboard-only navigation users is based on the order of the content in the HTML markup, also known as the linear reading order. Layout tables often include spanned rows and columns to achieve formatting effects. In such cases, the linearized reading order may not be the same as the visual reading order.
Best Practices
- The following tags and attributes should not appear in Layout table markup:
- <caption> </caption>
- <th> </th>
- scope="row" or scope="col"
- The following attribute should be included in the table tag, in order to hide the table from screen readers:
- <table role="none presentation">
Layout Table Example
Example
| A | B | C |
| 1 | 2 | 3 |
| ◆ | ▲ | ■ |
Code
<table role="none presentation">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr> <tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr> <tr>
<td>◆</td>
<td>▲</td>
<td>■</td>
</tr>
</table>
Data Tables
Data tables are a means of presenting information in a grid or matrix, where data cells represent a relationship between a row and a column. Visual users are able to quickly scan a table and identify associations between data in a cell and its corresponding column and row header. In order for individuals using screen readers to access and interpret data correctly and accurately, the relationship among data cells, column and row headers must be structurally specified.
Best Practices
- Structurally identify row and column headers.
<th> </th> - Structurally identify the scope (row or column) for headers.
scope="row" and scope="col" - Use simple tables.
(Avoid merging cells.) - Complex tables should be broken down into simpler ones.
(Avoid nesting tables.)
Data Table Example
Example
Dog Beds
| Size | Dimensions | Cost |
|---|---|---|
| Small | 20" x 30" | $25.00 |
| Medium | 25" x 40" | $30.00 |
| Large | 30" x 50" | $35.00 |
| X-Large | 45" x 60" | $45.00 |
Code
<h4>Dog Beds</h4>
<table class="dogBeds">
<tbody>
<tr>
<th scope="col">Size</th>
<th scope="col">Dimensions</th>
<th scope="col">Cost</th>
</tr> <tr>
<td scope="row">Small</td>
<td>20" x 30"</td>
<td>$25.00</td>
</tr> <tr>
<td scope="row">Medium</td>
<td>25" x 40"</td>
<td>$30.00</td>
</tr> <tr>
<td scope="row">Large</td>
<td>30" x 50"</td>
<td>$35.00</td>
</tr> <tr>
<td scope="row">X-Large</td>
<td>45" x 60"</td>
<td>$45.00</td>
</tr>
</tbody>
</table>
Creating Accessible Tables in the Rich Content Editor
- Select the table cells you want to define as header cells.
- Activate the pull-down menu from the Table tool.
- Select the option "Cell".
- Select "Cell properties".
- Choose header or data cell from the "Cell type" options.
- Choose column or row from the "Scope" options.
- Click OK.
See Creating Accessible Tables in the Rich Content Editor Links to an external site. for more information.