Using tables
Tables should be used primarily to display tabular data in a logical way. They must not be used to present content such as lists or other content in a certain layout, even if you think it looks better.
If tables are used incorrectly then they can be really bad for accessibility. Assistive technology, such as screen readers will not be able to associate the table contents with the headings, so those users will not understand the information.
Before you add a table to a web page, consider if there is a more accessible way that you can present that infomation.
Accessible alternatives to tables
Bullet lists
Bullet lists may not always seem the most visually appealing way to present content, but they are the most effective way to display lists. When people scan pages they are far more likely to read structured bulleted lists than paragraphs of text or complicated tables. Content in bulleted lists are also very good for screen readers.
Best practice examples
The examples below show two typical uses for tables and how these can instead be displayed using headings and bullet lists to improve the accessibility.
Best practice examples
Example one
A list of publications with downloads as a table:
Publication name | Author | Download |
---|---|---|
A history of Chemical Engineering | Prof. Joe Bloggs | Download |
Websites through the ages | Sally Webb | Download |
Maths for beginners | Adam Subtract | Download |
Example two
This is a list of teaching rooms as a table:
Room number | Building | Type | Capacity | Contacts |
---|---|---|---|---|
Room 123 | Imperial hall | Teaching | 130 | Contact reception for more infomation |
Room 344 | Imperial hall | Teaching | 45 | Contact reception for more infomation |
Room 45 | Imperial hall | Teaching | 32 | Contact reception for more infomation |
Example one
For this you could use a heading for the publication name followed by the author name and a download link:
Our publications
A history of Chemical Engineering
By Prof. Joe Bloggs
Download A history of Chemical Engineering (PDF)
Websites through the ages
Sally Webb
Download Websites through the ages (PDF)
Maths for beginners
By Adam Subtract
Download Maths for Beginners (PDF)
Example two
As this particular example has the same entries for all the building name and type and contacts then this works well with lists and headings:
Imperial hall
Teaching rooms
- Room 123 (capacity 130)
- Room 344 (capacity 45)
- Room 45 (capacity 32)
Contacts
Contact reception for more infomation
Other content types on the College website
If you are editing pages on the main College website, then Terminal four has a number of different contact types you can use:
- People lists/grids for contact lists/pages
- Accordions for FAQs
- A–Z Lists for directories
- Image grid for a selection of photos
- Column blocks for lists of links
- Tabs - for dividing up content e.g. for different audiences
How to choose the right content type
There is no one solution for all cases so the way you present the information will be dependent on:
- What type of infomation you are communicating
- Who your audience is
- What information your audiences need to know
- What the easiest way is to present the infomation to them
Need help or advice?
If you need any help or advice on how to present your tabular content then please contact your Faculty Web Officer or email Geoff Day (Content Designer).
Further guidance
- Our top tips for using tables
- Formatting tables in Microsoft Office documents
- How to mark up data tables to make them accessible (WebAIM)
- GOV.UK advice on using tables