When it comes to tables you’re actually best to avoid them when possible. If you must use a table, follow these guidelines.
1. Tables must have proper column headings.
The first row of information is a header row that names the columns of data. This informs the screen reader on how to read the data in the table.
2. Use tables to present data, never to layout or structure your pages.
Tables on pages are often referred to as Data Tables for this reason. If it is layout you are interested in, use our guidance on structuring instead.
3. Use HTML with data tables.
To insure that the table is as legible as possible by screen readers, make sure that:
- within the <table> tag there is a <caption> tag that describes the content of the table, e.g., <caption>Favourite ice cream flavours</caption>
- The first row of information is a header row that names the columns of data, e.g., <tr><th>Person</th><th>Flavour</th></tr>
- subsequent rows just contain data, e.g., <tr><td>Brian</td><td>Chocolate</td></tr>
Example:
| Person (heading) | Flavour (heading) |
|---|---|
| Brian | Chocolate |
| Samir | Strawberry |
| Jasmine | Vanilla |