# Table
Tables let users compare information in rows and columns.
## Preview
```html title="Table"
Passport processing times
| 10 working days |
| 15 working days |
| 10 working days |
```
```tsx
import { Table, TableCell, TableHeader } from '@govtech-bb/react';
Service
Processing time
Passport renewal
10 working days
;
```
The Table component presents structured data with bold left-aligned headers, a
navy rule under the header row and pale-blue hairline separators between rows.
When the first column identifies each row, mark it up as a row header
(``): it renders as a highlighted cell, and screen readers
associate the row's cells with it. Always include a caption describing what
the table shows, and use `scope="col"` on column headers.
## Usage
✓
When to use
- Use a table when users need to compare or look up structured data across rows and columns.
- Use it when every record shares the same fields, such as fees, dates or service locations.
×
When not to use
- Do not use a table for page layout, long prose or records with different structures.
- Do not use it for one set of key–value facts; use a summary list.
## Best practices
### Make comparison effortless
Use a descriptive caption, short headers in
[sentence case](/styles/text-case/) and consistent formats within
each column. Left-align text and right-align numbers that users compare as
values.
### Keep the structure semantic at every width
Use header cells with the correct `scope` and never remove them in a responsive
layout. Prefer horizontal scrolling for a genuinely wide table rather than
turning rows into ambiguous blocks or shrinking text until it is hard to read.
## Wide tables
A table with many columns can be wider than a phone screen. Wrap it in a
`govbb-table-container` so the table scrolls sideways inside the wrapper
instead of forcing the whole page to scroll. Give the wrapper `tabindex="0"`,
`role="region"` and an `aria-label` so keyboard users can focus it and scroll,
and screen readers announce what it contains.
```html title="Table that scrolls on small screens"
```
## Numeric columns
Add the `--numeric` modifier to a column's header and cells to right-align the
values and use tabular figures, so digits line up for easy comparison.
```html title="Table with a numeric column"
Application fees
| Passport renewal |
$150.00 |
| Birth certificate |
$25.00 |
| Driver's licence renewal |
$80.00 |
```
|