Table

Tables are for data with real row and column relationships — never for layout. Pedantic tables name themselves with a caption and label every header cell.

Basic table

<div class="pds-table-wrap">
  <table class="pds-table">
    <caption>Open projects by status</caption>
    <thead>
      <tr><th scope="col">Project</th><th scope="col">Owner</th><th scope="col">Status</th><th scope="col">Due</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Website Redesign</th><td>Design Team</td>
        <td><span class="pds-badge pds-badge--success">On Track</span></td><td>Dec 4, 2026</td></tr>
      <tr><th scope="row">App Onboarding</th><td>Product Team</td>
        <td><span class="pds-badge pds-badge--warning">At Risk</span></td><td>Dec 11, 2026</td></tr>
      <tr><th scope="row">Billing Migration</th><td>Engineering</td>
        <td><span class="pds-badge pds-badge--danger">Blocked</span></td><td>Dec 18, 2026</td></tr>
    </tbody>
  </table>
</div>

Anatomy

• Caption — every table has one. It is the table’s name and its summary in a few words.
• Header row — navy band, white text, one header per column with scope="col".
• Row headers — the identifying cell in each row is a <th scope="row">, so screen readers announce rows by name.
• Striping — alternating cream rows are a visual aid only; meaning never depends on them.
• Badges — status is text inside a colored badge, never color alone.

Rules

Accessibility notes

• scope on every header cell; complex tables with two header levels use id/headers instead — and get a second review.
• Sortable columns are buttons inside the header cell with aria-sort on the <th>; sorting is never icon-only.
• The caption is visible — it doubles as the table’s heading for every reader.