Tables
The tables pattern is for displaying data.
- Tables must not be used for more than two columns.
- If your content requires more than two columns use the DataTables pattern for more complex datasets as they offer a responsive solution.
- Tables must include a
table-striped class on the table element to add a background colour to alternate rows—this aids readability.
- You must use only text-based content within tables.
Colour headings
You also have the option of these other colours for the table header. Secondary and tertiary table headers are used on pages currently using the secondary and tertiary palette themes.
For further reference on colour palettes, see the colours page.
Options available
Default table heading
| Email address |
Name |
| ts12@st-andrews.ac.uk |
Tony Stark |
| sr34@st-andrews.ac.uk |
Steven Rogers |
| bb56@st-andrews.ac.uk |
Bruce Banner |
Code
| Email address |
Name |
| ts12@st-andrews.ac.uk |
Tony Stark |
| sr34@st-andrews.ac.uk |
Steven Rogers |
| bb56@st-andrews.ac.uk |
Bruce Banner |
Primary table heading
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Code
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Secondary table heading
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Code
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Tertiary 1 table heading
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Code
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Tertiary 2 table heading
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Code
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Tertiary 3 table heading
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |
Code
| Class |
Description |
.table-primary |
Primary palette colour, to be used on all pages using the primary palette theme. |
.table-secondary |
Secondary palette colour, to be used on all pages using the secondary palette theme. |
.table-tertiary-1 |
First tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-2 |
Second tertiary palette colour, to be used on all pages using the tertiary palette theme. |
.table-tertiary-3 |
Third tertiary palette colour, to be used on all pages using the tertiary palette theme. |