See examples of data tables.
A table is great for conveying data (finances, quantities, dates and times, etc) in an easy-to-understand way.
We only use data tables on our website. Don’t use tables to lay out steps or describe scenarios.
Don’t use table mark-up to structure a web page. We have specific templates (for instance, our external site or Student Hub) and components (such as navigation blocks) for structuring our website. Stick to these instead.
If needed add a class to the top “th” tag to force a table cell’s content to only render on one line:
This is an example of a simple table, with row headers. The row header association is set using the scope attribute on the table header <th> element. A caption is incuded to provide some context for screen reader users.
Postgraduate late registration fee
Undergraduate late registration fee
This example table has multiple columns of data. In this case we have utilised the scope attribute to associate the column headers to the data columns. This benefits screen reader users and makes a clear association between headers and data. If you are presenting a range of data, make sure to say this in the column header.
|Living cost||Estimated price (range)|
|Rent on campus*||£65.50 (shared) – £150.01|
|Mobile phone||£6 – £10|
|Food and household goods||£35 – £40|
|Local travel (based on annual and seven-day local bus saver tickets)||£8.85 – £12.50|
|Insurance (personal)||£1.10 – £3.64|
|Books and equipment||£7 – £12|
|Total||£128.45 – £233.15|
This example table has both column and row headers. We would not recommend creating this kind of table if it could be avoided. Here we have utilised the scope attribute to associate the column and row headers to the data. This benefits screen reader users and makes a clear association between headers and data.
|Facility||Price||Bathroom type||Launderette||Social room||Number of flatmates|
|2016 guideline single en-suite room||£148.88 per week||En suite||Yes||Yes||6-8|
|2016 guideline studio flat||£158.00 per week||En suite||Yes||Yes||6-8|
|2016 guideline family flat||£201.00 per week||En suite||Yes||Yes||6-8|