Table

Usage

Use a table to compare records across the same columns: work orders, service intervals, parts costs. Use a list group when each row is one item with a title and a few details, and a description list for the fields of a single vehicle.

• Default — row dividers only; fits most screens.
• Striped — wide tables with 6+ columns where the eye loses the row.
• Compact — dispatcher desktop views with many rows; never on tablet screens mechanics use with gloves.
• Bordered — dense numeric grids (cost breakdowns) where cells must read as separate.

Content: column headers are nouns in sentence case with the unit in brackets ("Labour (h)", "Parts (€)"). Format numbers with the locale (Intl.NumberFormat); show "0.00", not an empty cell, when the value is zero, and "—" with .sr-only "Not recorded" when it is unknown. Sorting, selection and pagination belong to the data table.

Anatomy

1. Scroll wrapper — .table-wrap, role="region", tabindex="0", labelled by the caption
2. Caption — <caption>, visible (.table__caption) or .sr-only
3. Column headers — <th scope="col"> in <thead>
4. Row header — <th scope="row">, the identifying cell (work order number)
5. Data cells — <td>; numeric ones get .table__num
6. Secondary line (optional) — .table__secondary inside a cell

Examples

States marked hover and focus-visible are frozen with .is-hover and .is-focus-visible. Those classes share their rule with the real pseudo-class; never use them in product code.

<div class="table-wrap" role="region" aria-labelledby="wo-caption" tabindex="0">
  <table class="table table--striped">
    <caption id="wo-caption" class="table__caption">Open work orders — week 41</caption>
    <thead>
      <tr><th scope="col">Work order</th><th scope="col">Vehicle</th><th scope="col">Mechanic</th><th scope="col" class="table__num">Labour (h)</th><th scope="col" class="table__num">Parts (€)</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">WO-4182</th><td>Van KX-219<span class="table__secondary">Ford Transit, 84,212 km</span></td><td>Marta Quintero</td><td class="table__num">3.5</td><td class="table__num">412.80</td></tr>
      <tr><th scope="row">WO-4185</th><td>Truck TR-077<span class="table__secondary">Volvo FH, 312,940 km</span></td><td>Idris Okafor</td><td class="table__num">11.0</td><td class="table__num">2,940.00</td></tr>
      <tr><th scope="row">WO-4191</th><td>Van KX-224<span class="table__secondary">Mercedes Sprinter, 51,006 km</span></td><td>Lena Brandt</td><td class="table__num">1.25</td><td class="table__num">68.40</td></tr>
      <tr><th scope="row">WO-4193</th><td>Pickup PU-012<span class="table__secondary">Toyota Hilux, 140,377 km</span></td><td>Marta Quintero</td><td class="table__num">0.75</td><td class="table__num">0.00</td></tr>
    </tbody>
  </table>
</div>

API

Do and don't

Accessibility

• Role: native <table>. Screen readers announce "table, Open work orders, 5 columns, 5 rows" and read the header with each cell.
• Every table has a <caption>; hide it with .sr-only only when a visible heading right above says the same.
• scope="col" and scope="row" on headers. Don't use role="grid" unless cells are interactive with arrow-key navigation.
• The scroll wrapper is focusable so keyboard users can reach overflowing columns; its name comes from the caption.
• Forced colors: all cell borders switch to CanvasText; stripes are dropped.

Tokens