The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

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

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

Tab

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

Forthcoming...

Example in action

Tables (see Academic calendar)

Table without border

Usage

Use our borderless tables to make the information feel more integrated with the text passages above or below the table.

Definition

Example

nested-tabs

Code samples

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

Forthcoming...

Forthcoming...