Table

Data table with caption and scope attributes, and an accessible scroll region for wide content.

  • Use native <table class="table"> inside a .table-wrap for surface, border, radius, and overflow.
  • Use <caption>, scope="col", and scope="row" for accessibility.
  • Use .text-end for numeric columns and .nowrap for non-wrapping cells.
  • For wide tables, make the wrapper an accessible scroll region with role="region", aria-labelledby, and tabindex="0".
  • Tables stay content-first and neutral by default.
Team members
Name Email Role Status
Alice Johnson alice@example.com Admin Active
Bob Smith bob@example.com Editor Active
Carol White carol@example.com Viewer Pending 
<div class="table-wrap">
  <table class="table">
    <caption>Team members</caption>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Role</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        <td>Admin</td>
        <td><span class="badge success soft">Active</span></td>
      </tr>
      <tr>
        <td>Bob Smith</td>
        <td>bob@example.com</td>
        <td>Editor</td>
        <td><span class="badge success soft">Active</span></td>
      </tr>
      <tr>
        <td>Carol White</td>
        <td>carol@example.com</td>
        <td>Viewer</td>
        <td><span class="badge secondary soft">Pending</span></td>
      </tr>
    </tbody>
  </table>
</div>
Revenue by month
Month Plan Revenue Churn
March 2026 Team $42,128 1.2%
April 2026 Team + Business $48,902 0.9%
May 2026 Team + Business $53,470 0.7% 
<div class="table-wrap" role="region" aria-labelledby="revenue-table" tabindex="0">
  <table class="table" style="--table-min: 64rem">
    <caption id="revenue-table">Revenue by month</caption>
    <thead>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Plan</th>
        <th scope="col" class="text-end">Revenue</th>
        <th scope="col" class="text-end">Churn</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>March 2026</td>
        <td>Team</td>
        <td class="text-end nowrap">$42,128</td>
        <td class="text-end nowrap">1.2%</td>
      </tr>
      <tr>
        <td>April 2026</td>
        <td>Team + Business</td>
        <td class="text-end nowrap">$48,902</td>
        <td class="text-end nowrap">0.9%</td>
      </tr>
      <tr>
        <td>May 2026</td>
        <td>Team + Business</td>
        <td class="text-end nowrap">$53,470</td>
        <td class="text-end nowrap">0.7%</td>
      </tr>
    </tbody>
  </table>
</div>