Tables

Tables display tabular data (e.g. statistical or comparison data) in columns and rows.

Using minimal visual styling tables may present otherwise complex information in a way that is easier to scan and compare making it easier for the user to discover patterns and insights.

Table with border
Table without border

Best practice

Table data should be organised in an order that will make sense to the user e.g. hierarchical or alphabetical.
Comparison tables should not have more than five columns or items to compare.
Avoid placing information users will not find meaningful as this just makes the table too big.
If the table looks too big and complex with too many rows and/or columns and/or long headings, consider utilising a filter UI instead.

Accessibility

To be revised!

Simple tables can have two levels of headers. Each header cell should have scope="col" or scope="row".
Complex tables are tables with more than two levels of headers. Each header should be given a unique id and each data cell should have a headers attribute with each related header.
When adding a title to a table, include it in a 'caption' tag inside of the 'table' element.

Example in action

Tables

Alternative UIs

Table with border

Usage

Use our bordered table component when the table is to present a large amount of data or to make the data stand out more from the text passages that may surround it.

Definition

Example

Code

Desktop

Table head font: Avenir Heavy, Arial, sans-serif; bold; 1.4em; $charcoal--120.
Table head border: 1px, $charcoal--120
Table body font: Avenir Book, Arial, sans-serif; normal weight; 1.4em; $charcoal--120.
Table body border: 1px, $black--40;
Alignment: left

Mobile

Font-size: 1.2em.

Forthcoming...

Example in action

Tables (see Academic calendar)

Table without border