Tables
The tables pattern is for displaying data.
- MUST not be used for more than two columns. Use the DataTables pattern for more complex datasets.
- The rows should alternate colour to increase readability.
- You MUST only use text-based content within tables.
Options available
Default
Email Address |
Name |
abc@domain.com |
Bob McBoberson |
def@domain.com |
Pat McPaterson |
ghi@domain.com |
Jo McJoerson |
Code
Email Address |
Name |
abc@domain.com |
Bob McBoberson |
def@domain.com |
Pat McPaterson |
ghi@domain.com |
Jo McJoerson |
Colour headings
You also have the option of these other colours for the table header, see the colours page for palettes.
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. |