Tables, both on webpages and in PDF documents can be useful tools to display data. They should not, however, be overused and there are some important rules to remember when using them.
- Tables must have proper column headings – whether in a document or on a web age so that they can be read by screen readers
- Never use a table to help layout or structure your pages, but only to present data. (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
- If possible use HTML to ensure that the table is as legible as possible
Using 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 | Flavour |
---|---|
Brian | Chocolate |
Samir | Strawberry |
Jasmine | Vanilla |
Example of where tables can do a bad job:
Name | Occupation |
James | Cook |
Arthur | Miller |
Alice | Cooper |
Jeffrey | Archer |
Donald | Duck |