Table

Stable

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.

Property	Tenant	Due
22 Ashby Road	Sam Lee	£650.00
9 Mill Lane	Ana Ruiz	£720.00

---

Specifications

LightDark

Anatomy

Property	Due
22 Ashby Road	£650.00

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

---

Usage

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

Tenant	Status	Due
Sam Lee	Overdue	£650.00

DoStatus in words, money right-aligned.

Tenant	Due
Sam Lee	650

Don'tStatus shown only by colour; unformatted money.

Do

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

Don't

• Use zebra stripes or coloured rows.

---

Implementation

HTML

Copy

<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 used

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

---

Accessibility

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

Related

Summary list

Key and value pairs for one record, such as a property or tenancy.

View component

Pagination

Move through a long list a page at a time.

View component

Status tag

A short status label: Paid, Overdue, Draft.

View component