canon-tables

CANON · Tables

Tables are for comparing values across rows. If users aren't comparing, they don't need a table.

Table vs cards vs list

Pattern	Use when
Table	Users scan multiple columns, compare rows, sort by column
Cards	Each item has rich content (image, description, multiple actions)
List	Simple one-item-per-row with 1–2 pieces of info

Tables shine with 4+ columns of structured data. Two columns? That's a list.

Use <table> semantics

<table>
  <caption class="sr-only">Sales by region, Q4 2025</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North America</th>
      <td>$2.4M</td>
      <td>+12%</td>
    </tr>
  </tbody>
</table>

• <table> — never a grid of <div>s. Screen readers need semantics.
• <caption> — describes the table; visually hide if the context makes it redundant.
• <th scope="col"> on column headers, <th scope="row"> on row headers.
• For complex tables (merged cells), use id + headers instead of scope.

Density — pick one, apply consistently

Density	Row height	Use
Compact	32px	Power-user tools, dense dashboards
Default	48px	Most apps
Comfortable	56px	Content-heavy rows with secondary text

Let users toggle density if power-user context. Default to 48px.

Alignment

Data type	Alignment
Text (names, descriptions)	Left
Numbers	Right
Currency, percentages	Right
Dates	Left
Status pills, boolean	Center or left
Actions column	Right

Numbers right-aligned compare at a glance. Left-aligned numbers force the eye to scan.

Use font-variant-numeric: tabular-nums on numeric columns — digits align vertically.

Sticky headers

For tables taller than one viewport:

• Column header: position: sticky; top: 0
• Optional: first column sticky-left for wide tables (position: sticky; left: 0)
• Background color must be opaque — or scrolled content bleeds through