Don’t use for Page Layouts/Design
The most important thing to know about using tables, is that they should never be used for layout. Back in the early days of web design, tables were the foundation of websites. With the advancement of CSS and modern web design techniques, we don’t need tables to layout content anymore. These days, tables should only be used to display tabular data.
Table markup for Screen Readers
It’s important to markup table data correctly for screen readers. Using the correct tags/elements, ensures that the screen reader accurately conveys the data to the users in a way they can understand.
<table> : Table element tag
<caption> : not required, but very helpful, you can insert the name of the table or descriptive information about what the table displays. Some individuals add a heading tag to the caption area. Contained directly below the table tag.
<tr> : Used to designate a table row
<th> : Contained within a <tr> it is used to identify a column or row heading for a table
Should contain a ‘scope’ attribute, where scope=”row” if it’s a row header, or scope=”col” if it is a column header
<td> : Used for table cells contained within a row
Minimal Table Example
<table>
<caption>Table Heading</caption>
<tbody>
<tr>
<th scope=”col”>Column 1</th>
<th scope=”col”>Column 2</th>
</tr>
<tr>
<td>Content for Column1</td>
<td>Content for Column2</td>
</tr>
</tbody>
</table>
Table Tips
Try to keep tables as uncomplicated as possible. The more complicated the table, the more difficult for non-sighted visitors to understand the data.
<summary> tags can be used to describe the layout of information for tables that are complex, however, complex tables should be avoided (see the previous tip).