Data table

How to use it

Use for tabular data people compare across rows and columns, such as usage or financial figures. Do not use a table for layout or for a single list of items (use a list). Keep the columns that identify a row first, because on narrow screens the rest scroll sideways; if keyboard users must reach off-screen columns in a browser that does not focus scroll containers, put a link in each row or use the responsive stacked table instead. After copying, change the caption id and its aria-labelledby reference.

Accessibility

A real <table> with a <caption>, column headers marked th scope="col" and the first cell of each row th scope="row", so screen readers announce the right headers for every cell. The scroll wrapper is role="region" named by the caption through aria-labelledby; it carries no tabindex, and current Chromium and Firefox make a scroll container with no focusable content keyboard-scrollable on their own. Body text is #0f172a on #ffffff (17.85:1) and on the #f8fafc striped rows (17.06:1); headers are #0f172a on #f1f5f9 (16.30:1).

Source (copy-ready)

Copy code

<div class="dcl-data-table" role="region" aria-labelledby="dcl-data-table-caption">
  <table class="dcl-data-table__table">
    <caption class="dcl-data-table__caption" id="dcl-data-table-caption">API usage by region, March</caption>
    <thead>
      <tr>
        <th scope="col" class="dcl-data-table__head">Region</th>
        <th scope="col" class="dcl-data-table__head dcl-data-table__num">Requests</th>
        <th scope="col" class="dcl-data-table__head dcl-data-table__num">Errors</th>
        <th scope="col" class="dcl-data-table__head dcl-data-table__num">Error rate</th>
        <th scope="col" class="dcl-data-table__head dcl-data-table__num">p95 latency (ms)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="dcl-data-table__row"><th scope="row" class="dcl-data-table__rowhead">Europe West</th><td class="dcl-data-table__cell dcl-data-table__num">1,284,310</td><td class="dcl-data-table__cell dcl-data-table__num">2,104</td><td class="dcl-data-table__cell dcl-data-table__num">0.16%</td><td class="dcl-data-table__cell dcl-data-table__num">182</td></tr>
      <tr class="dcl-data-table__row"><th scope="row" class="dcl-data-table__rowhead">US East</th><td class="dcl-data-table__cell dcl-data-table__num">2,061,945</td><td class="dcl-data-table__cell dcl-data-table__num">5,872</td><td class="dcl-data-table__cell dcl-data-table__num">0.28%</td><td class="dcl-data-table__cell dcl-data-table__num">164</td></tr>
      <tr class="dcl-data-table__row"><th scope="row" class="dcl-data-table__rowhead">Asia Pacific</th><td class="dcl-data-table__cell dcl-data-table__num">733,402</td><td class="dcl-data-table__cell dcl-data-table__num">918</td><td class="dcl-data-table__cell dcl-data-table__num">0.13%</td><td class="dcl-data-table__cell dcl-data-table__num">231</td></tr>
      <tr class="dcl-data-table__row"><th scope="row" class="dcl-data-table__rowhead">South America</th><td class="dcl-data-table__cell dcl-data-table__num">205,117</td><td class="dcl-data-table__cell dcl-data-table__num">640</td><td class="dcl-data-table__cell dcl-data-table__num">0.31%</td><td class="dcl-data-table__cell dcl-data-table__num">276</td></tr>
    </tbody>
  </table>
</div>
<style>
.dcl-data-table { max-width: 100%; overflow-x: auto; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-data-table__table { width: 100%; min-width: 34rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dcl-data-table__caption { padding: 0.75rem; text-align: left; font-weight: 700; color: #0f172a; background-color: #ffffff; }
.dcl-data-table__head { padding: 0.6rem 0.75rem; text-align: left; white-space: nowrap; border-bottom: 2px solid #cbd5e1; color: #0f172a; background-color: #f1f5f9; }
.dcl-data-table__rowhead { padding: 0.6rem 0.75rem; text-align: left; font-weight: 600; white-space: nowrap; border-top: 1px solid #e2e8f0; color: #0f172a; background-color: #ffffff; }
.dcl-data-table__cell { padding: 0.6rem 0.75rem; border-top: 1px solid #e2e8f0; color: #0f172a; background-color: #ffffff; }
.dcl-data-table__row:nth-child(even) .dcl-data-table__rowhead, .dcl-data-table__row:nth-child(even) .dcl-data-table__cell { color: #0f172a; background-color: #f8fafc; }
.dcl-data-table__num { text-align: right; }
.dcl-data-table__head.dcl-data-table__num { text-align: right; }
</style>