Table

Recent deployments.
Commit	Environment	Status
a3cd96e	Production	Live
b1b44c4	Staging	Building
e14ae5a	Preview	Failed
Total		3

<div class="table-container">
  <table class="table">
    <caption>Recent deployments.</caption>
    <thead>
      <tr>
        <th scope="col">Commit</th>
        <th scope="col">Environment</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>a3cd96e</td>
        <td>Production</td>
        <td><span class="badge badge-secondary">Live</span></td>
      </tr>
      <tr>
        <td>b1b44c4</td>
        <td>Staging</td>
        <td><span class="badge badge-outline">Building</span></td>
      </tr>
      <tr>
        <td>e14ae5a</td>
        <td>Preview</td>
        <td><span class="badge badge-destructive">Failed</span></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Total</td>
        <td>3</td>
      </tr>
    </tfoot>
  </table>
</div>

Usage

<div class="table-container">
  <table class="table">
    <thead>
      <tr><th scope="col">Commit</th></tr>
    </thead>
    <tbody>
      <tr><td>a3cd96e</td></tr>
    </tbody>
  </table>
</div>

The wrapper is what makes a wide table scroll instead of breaking the page. The class styles the real table elements, so thead, tfoot, caption and colspan all keep working.

Selected rows

Name	Role
Ada Lovelace	Owner
Grace Hopper	Admin

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr data-state="selected">
        <td>Ada Lovelace</td>
        <td>Owner</td>
      </tr>
      <tr>
        <td>Grace Hopper</td>
        <td>Admin</td>
      </tr>
    </tbody>
  </table>
</div>

data-state="selected" on a <tr> marks it. Pair it with aria-selected when the selection is something the user made.

An overflow: auto region a keyboard cannot focus traps its own content. Give the wrapper tabindex="0" and a name when the table can actually scroll:

<div class="table-container" tabindex="0" role="region" aria-label="Deployments">

RTL

Set dir="rtl" on the page or on any subtree — headers and cells align to the reading direction on their own. See the button page for a live example.

Accessibility

scope on every header. scope="col" or scope="row" is what tells a screen reader which cells a header describes.
A <caption> names the table and is announced before its contents. It beats a heading above the table, which is not associated with it.
Do not use a table for layout. If the data is not tabular, the row and column announcements are noise.
Keep to one header row where you can. Split and nested headers need headers and id on every cell to stay navigable.