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

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

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

Alignment

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

Zebra striping — usually unnecessary

Zebra striping is a band-aid for poor row separation. A 1px subtle border between rows works better and looks cleaner.

Use zebra only when:

• Very wide tables where the eye loses the row across columns
• Extremely dense (32px) rows where borders clutter

When striping, use a very light alternate: 2–4% difference from base. Heavy stripes dominate the content.

Sorting

• Every sortable column has a visible indicator when active (up/down arrow).
• Hover on sortable column shows a muted preview arrow.
• Click toggles ascending → descending → (optionally) unsorted.
• aria-sort="ascending" | "descending" | "none" on the <th>.
• Default sort is the most meaningful column, not the first (usually not "ID").

Pagination vs infinite scroll vs virtualization

For large data, virtualization wins over infinite scroll for tabular contexts. Keyboard and screen-reader users need predictable jumps.

Show total count always: "Showing 1–50 of 1,247."

Row actions

Don't hide the primary action in a hover-only menu — breaks on touch.

Empty state

Every table needs an empty state with an action path.

No projects yet.
[+ Create project]

Three types of empty:

• Initial: "You haven't created any X yet. [action]"
• Filtered: "No X match your filters. [Clear filters]"
• Error: "Couldn't load X. [Retry]"

Loading state

First load: skeleton rows matching the final row count (3–8 rows), shimmer 1000–1500ms.

Subsequent loads (sort/filter): overlay with 60% opacity + spinner, keep existing rows visible so users don't lose context.

Responsive — tables on mobile

Tables are hard on mobile. Three strategies:

1. Horizontal scroll — table keeps structure, container scrolls. Works for wide data tables. Cue with shadow on scroll edge.
2. Collapse to cards — each row becomes a card with label: value pairs. Works for < 6 columns of meaningful data.
3. Hide columns — show 2–3 critical columns on mobile, hide the rest, reveal via expand or detail page.

Don't crush text to fit — unreadable beats scrollable.

Column widths

• Let content drive where possible.
• Fixed widths only for: action column (right-aligned, often 40–80px), status column, date column.
• Text columns use min-width not hard width, allow truncation with tooltip on hover/focus.

Truncation

.cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

Truncated text must show the full value on hover (tooltip) and keyboard focus. Users shouldn't need to widen the window to read data.

Anti-patterns

Decision tree

Are users comparing values across rows?
  ├─ No → Use cards or list
  └─ Yes → Table

How many rows?
  ├─ < 50 → Render all
  ├─ 50–1000 → Paginate
  └─ 1000+ → Virtualize

Mobile?
  ├─ < 6 columns → Collapse to cards
  └─ 6+ columns with comparable data → Horizontal scroll

Row actions?
  ├─ 1–3, frequent → Trailing column buttons
  ├─ 4+ → Kebab menu
  └─ Bulk → Checkbox + action bar

Audit checklist

• Uses <table> / <thead> / <tbody> / <th>
• scope attributes on <th>
• <caption> present (visually hidden OK)
• Numbers right-aligned with tabular-nums
• Sticky headers opaque, visible
• Sorted column shows indicator + aria-sort
• Empty state has action path
• Loading state shown on first and subsequent loads
• Row actions visible without hover on touch
• Truncation reveals full value on hover/focus
• Pagination shows total count
• Mobile strategy chosen (scroll / cards / hidden columns)
• Row heights consistent

Sources

• WCAG 2.2 · 1.3.1 Info and Relationships, 1.3.2 Meaningful Sequence
• WAI-ARIA · aria-sort, table roles
• Material Design 3 · Data tables
• Apple HIG · Tables, Lists
• Refactoring UI · "Align text to improve legibility", "Use tabular numbers"