# Table

Status: stable

Rows of data the user compares or scans.

Tables show rows of records managers compare and scan: properties, tenancies, payments. Keep columns few, especially in narrow quick views, and right-align money and numbers.

## Example

```html
<table class="at-table">
  <thead><tr><th>Property</th><th>Tenant</th><th class="at-num">Due</th></tr></thead>
  <tbody>
    <tr><td>22 Ashby Road</td><td>Sam Lee</td><td class="at-num">&pound;650.00</td></tr>
    <tr><td>9 Mill Lane</td><td>Ana Ruiz</td><td class="at-num">&pound;720.00</td></tr>
  </tbody>
</table>
```

## Anatomy

1. **Header cell**: background: var(--at-bg-neutral); color: var(--at-text-subtle); font-weight: var(--at-weight-bold)

2. **Cell**: padding: var(--at-space-3) var(--at-space-4); border-bottom: 1px solid var(--at-border)

3. **Number cell (.at-num)**: text-align: right; font-variant-numeric: tabular-nums

## When to use

- Several records with the same fields.

## When not to use

- One record: use a summary list.
- Page layout.

## Content

- Short column headings.
- Dates as "4 Oct 2026"; money as "£650.00".

## Do and don't

Do: Status in words, money right-aligned.

```html
<table class="at-table"><thead><tr><th>Tenant</th><th>Status</th><th class="at-num">Due</th></tr></thead><tbody><tr><td>Sam Lee</td><td><span class="at-tag at-tag--danger">Overdue</span></td><td class="at-num">&pound;650.00</td></tr></tbody></table>
```

Don't: Status shown only by colour; unformatted money.

```html
<table class="at-table"><thead><tr><th>Tenant</th><th>Due</th></tr></thead><tbody><tr><td style="color:var(--at-text-danger)">Sam Lee</td><td>650</td></tr></tbody></table>
```

## Do

- Right-align money and numbers.
- Put row actions in the last column as link buttons.

## Don't

- Use zebra stripes or coloured rows.

## Code

```html
<table class="at-table">
  <thead><tr><th>Property</th><th>Tenant</th><th class="at-num">Due</th></tr></thead>
  <tbody>
    <tr><td>22 Ashby Road</td><td>Sam Lee</td><td class="at-num">&pound;650.00</td></tr>
    <tr><td>9 Mill Lane</td><td>Ana Ruiz</td><td class="at-num">&pound;720.00</td></tr>
  </tbody>
</table>
```

## Classes

| Class | What it does |

|---|---|

| `at-table` | Full-width table |

| `at-num` | Right-aligned, tabular numbers |

## Tokens

`--at-border`, `--at-text-subtle`, `--at-bg-neutral`

## Accessibility

- Use th for headers; add a caption when the table has no visible heading.