Last update
27 August 2026Use the table component to make information easier to compare and scan for users.
| Name | Age | Country |
|---|---|---|
| Alice | 25 | UK |
| Bob | 30 | USA |
| Charlie | 22 | Canada |
| David | 35 | Australia |
| Eva | 28 | Germany |
Stacked table (mobile)
Use a stacked table to make tabular data easier to read on smaller screens. On mobile, each row is displayed vertically with its column headings shown alongside the corresponding values.
| Name | Age | Country |
|---|---|---|
| Alice | 25 | UK |
| Bob | 30 | USA |
| Charlie | 22 | Canada |
| David | 35 | Australia |
| Eva | 28 | Germany |
Scrollable table
Use a scrollable table when the table has many columns or content that cannot fit within the available page width. Users can scroll horizontally to view the full table while preserving the relationship between rows and columns.
Scroll horizontally to see all columns
| Name | Age | Country | Department | Job title | Programme | Status | Email address | Start date | End date | Budget |
|---|---|---|---|---|---|---|---|---|---|---|
| Alice | 25 | UK | International Development | Programme Manager | Climate Resilience Programme | Active | alice@example.gov.uk | 1 April 2026 | 31 March 2030 | £25,000,000 |
| Bob | 30 | USA | Finance and Operations | Senior Finance Adviser | Global Partnerships Programme | In review | bob@example.gov.uk | 15 June 2025 | 14 June 2029 | £18,500,000 |
| Charlie | 22 | Canada | Policy and Strategy | Policy Adviser | Food Security Programme | Active | charlie@example.gov.uk | 1 January 2026 | 31 December 2028 | £12,750,000 |
| David | 35 | Australia | Programme Delivery | Delivery Manager | Humanitarian Support Programme | Completed | david@example.gov.uk | 10 May 2022 | 9 May 2026 | £32,000,000 |
| Eva | 28 | Germany | International Policy | Senior Policy Adviser | Economic Development Programme | Active | eva@example.gov.uk | 20 September 2025 | 19 September 2029 | £21,250,000 |