Table
A table is used to organise data in an easy to understand format.
Breakdown
Table (Default)
A set of data that is easy for a user to scan, examine, and compare. Table data is displayed in a grid format with alternating ‘zebra’ stripes which structures the static data. The default table is made up of alternating zebra striped cells. The first data row uses 100% sheep white and the following row takes on the background it sits on.
| Example Rich Text | Example Rich Text | Example Rich Text | Example Rich Text |
|---|---|---|---|
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
Table (Variants)
Table variants take on the background colour it sits on but then uses a 25% tint of sheep white for the alternating rows. The stroke of the header row should match the text colour.
| Example Rich Text | Example Rich Text | Example Rich Text | Example Rich Text |
|---|---|---|---|
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text | Example Rich Text | Example Rich Text | Example Rich Text |
|---|---|---|---|
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text | Example Rich Text | Example Rich Text | Example Rich Text |
|---|---|---|---|
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text | Example Rich Text | Example Rich Text | Example Rich Text |
|---|---|---|---|
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
| Example Rich Text |
Example Rich Text |
Example Rich Text |
Example Rich Text |
Usage
Headers in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalised and the rest lowercase.
- Left-align text within a table data.
- Avoid unnecessary words in table headers such as ‘the’, ‘an’ or ‘a’
- Keep decimals consistent.
- Use colour sparingly and purposefully to accent important statuses and information.
- Avoid over-styling text.
Badge
Badges can be placed within cells if it helps the user identify data quickly at a glance
Avatar
Avatars can be placed within cells. Text remains centred vertically within the cell.
Alignment
Standard table text should be left-aligned. Right alignment is permitted if a dataset consists of whole numbers, if numbers contain multiple decimal places the alignment won’t remain consistent.
Header text should be aligned with the data. Centred text can be used in rare circumstances where there is few rows of data to view.
Left aligned dataset
Right aligned dataset
Anatomy
Vertical padding
Vertical padding is the empty space between an elements top or bottom edges. Select fields have a vertical padding of 9px.
Horizontal padding
Horizontal padding is the empty space between an elements left or right edges. Select fields have a horizontal padding of 9px.
Colour
Table variants take on the background colour it sits on but then uses a 25% tint of sheep white for the alternating rows. The stroke of the header row should match the text colour.
Accessibility
Labels
Don’t include the word ‘table’ as part of the label to prevent repetitive content read aloud by assistive technologies.
Keyboard navigation
When tabbing through content, the focus should only place itself on interactive elements like links. If a cell does not contain an interactive element, the tabbing should skip the cell. Enter or return then activates buttons after focusing.
Avoid complex tables where possible, this is to reduce the table needing a horizontal scroll on smaller devices.
