Components

Tables

Tabular clinical and administrative data. A tinted header row, a subtle divider between rows, and no rule under the header — the tint is what separates it.

<div class="sr-table-wrap">
  <table class="sr-table">
    <thead class="sr-table__head">…</thead>
    <tbody>
      <tr class="sr-table__row sr-table__row--selected">…</tr>
    </tbody>
  </table>
</div>

Row 2 shows the selected state; hover any row to see the hover surface. Dates use the d Mmm yyyy format, and the header uses the No. abbreviation exception.

Show clinical or administrative data in rows and columns so staff can scan, compare and act on it, patient lists, results, appointments, audit logs.

When to use

• The data is genuinely tabular, rows are comparable across a shared set of columns (patient lists, results, appointments, audit logs).
• Staff need to scan down a column, sort, or compare rows.

When not to use

• For a single record's fields (one entity, many attributes), use a description list or the summary pattern, not a table.
• For 2–5 mutually exclusive choices, use radios; for a long selectable list, use Select. See.
• For general table markup and layout guidance, follow GDS / NHS England, this page covers only Single Record specifics.

How it works

• Row states are token-bound, see the table below; never hardcode row backgrounds.
• Compact clinical density, body cells are Body S (14/20) at 8px padding, 40px tall. This is the primary-content minimum, justified for data-dense clinical views.
• Square corners, data grids are full-bleed (radius.none).
• Row actions read as interactive, icon-only actions render in Interactive/Primary (blue), destructive in Interactive/Destructive (red).
• Horizontal scroll, never page-break, wide tables scroll inside .sr-table-wrap.

Row states

Row dividers use sr.color.border.subtle. A selected row must also carry a non-colour signal (e.g. a persistent selection control or a left accent border), colour is never the only indicator (WCAG 1.4.1).

Options

Do & don't

Accessibility

• Semantic <table>, <thead>, <tbody>, <th scope="col">; <th scope="row"> for the row-headers layout.
• The actions-column header carries a visually-hidden "Actions" label.
• Every icon-only row action must have an aria-label naming the action and its subject (e.g. "Edit Jones, Alis"). Icons themselves are aria-hidden.
• Row action targets are 32×32px, a documented dense-desktop exception; promote to full-size controls on touch/mobile.
• Focus uses Border/Focus (Cyan/700, ), outside the element.

Content

• Abbreviations: avoid abbreviations and never use full stops (ECG, not E.C.G.). Table-heading exception: No. is allowed for "Number" in a column heading where width is genuinely tight. This is the only sanctioned abbreviation-with-full-stop, and only in headings.
• Dates (, adapted): use the short form d Mmm yyyy (e.g. 10 Mar 2026) in tables and anywhere else width is constrained; use the long form 10 March 2026 in prose and where there is room. An abbreviated or full month name (never a digit) is what resolves day/month ambiguity for clinical safety. This adapts the legacy dd-Mmm-yyyy format, which used hyphens; the ambiguity protection is unchanged.
• Names: SURNAME, First M in list/table columns.
• Sentence case for all cell content and headings. Follow the DHCW terminology table.

Frameworks

Sorting, filtering and pagination are planned and not yet part of the reference,

Clinical / DHCW notes

The legacy. These map onto the kebab-left layout and the selectable-row / editable patterns respectively, carried forward, re-expressed against the token system. Chronology defaults to oldest-first with sortable columns.

Related

• Select · Tags (status badges in cells) · Button (row actions)
• GDS Table · NHS England Table

Accessibility requirements