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

As a table

Example one

A list of publications with downloads as a table:

Publication nameAuthorDownload
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 BuildingTypeCapacityContacts
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Using headings and lists

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