Tables
These examples are used for automated tests and may not follow service manual best practice.
Tables default
Open this example in a new tab: Tables default
| Skin symptoms | Possible cause |
|---|---|
| Blisters on lips or around the mouth | Cold sores |
| Itchy, dry, cracked, sore | Eczema |
| Itchy blisters | Shingles, chickenpox |
Tables with empty items
Open this example in a new tab: Tables with empty items
| Date | Vaccine |
|---|---|
| 10 July 2024 | RSV |
Tables with first cell as header
Open this example in a new tab: Tables with first cell as header
| Day of the week | Opening hours |
|---|---|
| Monday | 9am to 6pm |
| Tuesday | 9am to 6pm |
| Wednesday | 9am to 6pm |
| Thursday | 9am to 6pm |
| Friday | 9am to 6pm |
| Saturday | 9am to 1pm |
| Sunday | Closed |
Tables with missing data
Open this example in a new tab: Tables with missing data
| Date | Vaccine | Product |
|---|---|---|
| 10 July 2024 | RSV | Abrysvo |
| 6 September 2023 | Flu | No data |
Tables with numeric data
Open this example in a new tab: Tables with numeric data
| Item | Current charge | New charge |
|---|---|---|
| 3-month | £31.25 | £32.05 |
| 12-month | £111.60 | £114.50 |
| HRT | £19.30 | £19.80 |
Tables with responsive layout
Open this example in a new tab: Tables with responsive layout
| Age | How much? | How often? |
|---|---|---|
| 3 to 5 months (weighing more than 5kg) | 2.5ml | Max 3 times in 24 hours |
| 6 to 11 months | 2.5ml | Max 3 to 4 times in 24 hours |
| 1 to 3 years | 5ml | Max 3 times in 24 hours |
| 4 to 6 years | 7.5ml | Max 3 times in 24 hours |
| 7 to 9 years | 10ml | Max 3 times in 24 hours |
| 10 to 11 years | 15ml | Max 3 times in 24 hours |
| 12 to 17 years | 15ml to 20ml | Max 3 to 4 times in 24 hours |
Tables with responsive layout and custom HTML
Open this example in a new tab: Tables with responsive layout and custom HTML
| Name | Type | Description |
|---|---|---|
| id | string | The ID of the table. |
| rows | array | Required. The rows within the table component. See macro options for rows. |
| head | array |
Can be used to add a row of table header cells (<th>) at the top of the table component.
See macro options for head.
|
| caption | string | Caption text. |
| captionClasses | string | Classes for caption text size. Classes should correspond to the available typography heading classes. |
| firstCellIsHeader | string |
If set to true, the first cell in each row will be a table header (<th>).
|
| classes | string | Classes to add to the table container. |
| attributes | object | HTML attributes (for example data attributes) to add to the table container. |
Tables with word breaks
Open this example in a new tab: Tables with word breaks
| Name | Email address | Status | Actions |
|---|---|---|---|
| Stephanie Meyer | stephanie.meyer9@test.com | Active | |
| Aleksandrina Featherstonehaugh-Whitehead | aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com | Inactive |
Tables as a card
Open this example in a new tab: Tables as a card
| Skin symptoms | Possible cause |
|---|---|
| Blisters on lips or around the mouth | Cold sores |
| Itchy, dry, cracked, sore | Eczema |
| Itchy blisters | Shingles, chickenpox |
Tables as a card (feature)
Open this example in a new tab: Tables as a card (feature)
Other conditions like impetigo
| Skin symptoms | Possible cause |
|---|---|
| Blisters on lips or around the mouth | Cold sores |
| Itchy, dry, cracked, sore | Eczema |
| Itchy blisters | Shingles, chickenpox |
Tables as a card (feature) with responsive layout
Open this example in a new tab: Tables as a card (feature) with responsive layout
Other conditions like impetigo
| Skin symptoms | Possible cause |
|---|---|
| Blisters on lips or around the mouth | Cold sores |
| Itchy, dry, cracked, sore | Eczema |
| Itchy blisters | Shingles, chickenpox |