# Tables

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/tables · Updated 2026-10-14
Use when: Designing or coding any table: product data tables, comparison tables, tables in documents and slides.
Rules that always apply: https://identity.north.ae/AGENTS

## Anatomy
- Container: 1px Steel 20 border, radius 12, raised surface; horizontal scroll inside the container, never the page.
- Caption above (Display Medium 15px) stating what the table shows.
- Header: sticky, --n-table-header (Steel 05 / Midnight 90 dark), Text SemiBold 12px, caption colour, +0.03em, no wrap, 1px rule below.
- Body: Text 14px, padding 11px 16px, 44px rows (compact 32, relaxed 56); 1px Steel 20 horizontal rules; first column as <th scope="row"> (Medium, heading colour).
- Footer: totals SemiBold with 2px top rule and subtle fill; pagination bar below with range text.

## Borders
- Default: outer frame + horizontal rules only. Grid (vertical + horizontal): comparison and merged headers. Zebra (Steel 05 alternate rows, no rules): very wide numeric tables. Borderless: inside cards/documents. Never zebra + grid; no borders > 1px except totals.

## Alignment
- Text left (right in Arabic); numbers, money, ISO dates, durations right with tabular-nums; status badges after text; actions last column; units in headers; truncate with ellipsis + tooltip; never wrap IDs.

## Merged and highlighted cells
- colspan group headers centred with rule below; rowspan cells top-aligned with subtle fill and right rule. Merge only headers and genuinely shared values; keep scope/headers for screen readers.
- Highlight (Dawn tint, SemiBold) for the value to notice — 1–2 per table. AI-computed cell: 1.5px Oasis 70 inset outline + tooltip. Error/missing: danger text on danger tint, "—" for missing. Selected row: --n-row-selected + 3px action leading edge.

## Interaction
- Hover tint (--n-row-hover); whole-row click only if it opens one thing. Checkbox column for selection, header checkbox with indeterminate; bulk-action bar replaces footer. Sort via header button with arrow + aria-sort (one sort). Expandable rows with chevron; inline edit (Enter saves, Esc cancels). Sticky header always; sticky first column when scrolling horizontally.

## States
- Loading: header + 3–5 skeleton rows at real widths. Empty: reason + next action (clear filters / add first). Error: inline alert in the body with Retry.

## Responsive
- ≥960 full; 640–959 hide low-priority columns (keep row header, status, actions); <640 cards of label–value pairs (records) or horizontal scroll with sticky first column (numeric comparison).

## Documents and slides
- Header in caption-colour capitals 12px, horizontal rules, fills only for totals. Slides ≤ 6 rows × 5 columns at ≥ 18pt. Arabic tables mirror column order.

## Code
```html
<div class="n-table-wrap"><table class="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 is-highlight">4</td></tr></tbody></table></div>
```