Tables

Tables are for comparing

Use a table when people need to compare values across rows and columns. If they only need to read items, use a list; if they need one number, use a big number.

Anatomy

Borders

Never combine zebra and grid. Never use heavy (2px+) borders except the totals rule.

Alignment

• Text: left (right in Arabic). Header aligns with its column's content.
• Numbers, money, dates in ISO, durations: right, with tabular figures (font-variant-numeric: tabular-nums), so digits line up.
• Status badges and icons: left, after text columns. Actions: last column, right.
• Units go in the header (“Latency (ms)”), not in every cell.
• Truncate long text with an ellipsis and a tooltip; never wrap IDs.

Merged and highlighted cells

Merge cells only in headers and for genuinely shared values. Never merge body cells to create layout; screen readers must still be able to read every cell with its headers (scope, headers).

Row states and interaction

• Hover: a faint tint across the row. Click target: the whole row only when it opens one thing; otherwise a link in the first column.
• Selection: checkbox column on the leading edge; header checkbox selects the page, with an indeterminate state; a bulk-action bar replaces the footer while rows are selected.
• Sorting: click the header; arrow shows the direction; aria-sort on the <th>. One sort at a time by default.
• Expandable rows: chevron in the first cell; details open below in an inset panel.
• Inline edit: on double-click or an edit icon; save on Enter, cancel on Esc.
• Sticky header always; sticky first column when the table scrolls horizontally.

Density

Empty, loading and error states

• Loading: keep the header; show 3–5 skeleton rows with the real column widths.
• Empty: explain why and offer the next action (clear filters, add the first item).
• Error: keep the header, show an inline alert in the body with Retry.

Responsive tables

Tables in documents and slides

• Use the Word template's table style or the hub's table style: header in caption colour capitals 12px, horizontal rules, no fills except totals.
• Slides: at most 6 rows × 5 columns at 18pt or larger; otherwise use a chart or an appendix.
• Arabic tables mirror the column order: the row header column is on the right.

Code

<div class="n-table-wrap">
  <table class="n-table">               <!-- n-table--grid | --zebra | --compact | --relaxed -->
    <caption>Licences</caption>
    <thead><tr><th scope="col" aria-sort="ascending"><button class="sort">User</button></th><th scope="col" class="num">Models</th></tr></thead>
    <tbody>
      <tr class="is-selected"><th scope="row">Layla Haddad</th><td class="num">4</td></tr>
      <tr><th scope="row">Sara Khalil</th><td class="num is-highlight">6</td></tr>
    </tbody>
  </table>
</div>

<!-- Tailwind -->
<th class="sticky top-0 bg-n-table-header text-n-caption text-xs font-semibold tracking-wide whitespace-nowrap px-4 py-3 text-left border-b border-n-border-ui">
<td class="px-4 py-3 border-b border-n-border-ui text-right tabular-nums">

Dos and don'ts

Last updated on 14 October 2026