Table
stableserver-safe
Rows and columns, always inside its own horizontal scroller so a wide table never makes the page scroll sideways.
With numeric alignment
Numeric columns are right-aligned and use tabular figures, so digits line up.
| Item | Type | Pins |
|---|---|---|
| Jeanne Dielman | Film | 1,284 |
| The Blue Nile — Hats | Album | 977 |
| Pond, Claire-Louise Bennett | Novel | 412 |
<Table label="Most pinned this week" hover>
<thead>
<tr><Th>Item</Th><Th align="end">Pins</Th></tr>
</thead>
<tbody>
<tr><Td>Jeanne Dielman</Td><Td align="end">1,284</Td></tr>
</tbody>
</Table>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Describes the table. An unlabelled table is a maze. |
| hover | boolean | false | Tint rows on hover. Only when rows are clickable. |
Guidance
Do
- Right-align numbers. Left-align text. Never centre either.
Don't
- Don't use a table for layout.
Accessibility
Th renders scope="col", so each column header is bound to its cells.
The wrapper scrolls rather than the page, and is keyboard-scrollable.