Tables

See examples of data tables.

Using 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.

Misusing tables

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.

Table 1

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.

Tuition fee: additional costs

Fee Item	Postgraduate late registration fee	Undergraduate late registration fee
Amount 2018/19	£55	£55
Amount 2019/20	£55	£55

---

Table 2

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.

Summary table outlining potential living costs per week

Living cost	Estimated price (range)
Rent on campus*	£65.50 (shared) – £150.01
Mobile phone	£6 – £10
Food and household goods	£35 – £40
Laundry	£5
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

---

Table 3

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.

Northfield accommodation key facts table

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

---