COMPONENTS

Tables

Use real table semantics, captions and header scopes. Wrap wide tables in a labelled, focusable scroll region.

Usage

Markup: table; .table-scroll for overflow

Behaviour: CSS does not sort, filter or fetch records.

Component API and styling module · Inherited appearance settings

Plain table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

Project status
ProjectStatus
WebsiteIn review
DocumentationIn progress
HTMLSelect text to copy
<div class="table-scroll" role="region" aria-label="Project status, plain table" tabindex="0">
  <table data-table="plain">
    <caption>Project status</caption>
    <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><th scope="row">Website</th><td>In review</td></tr>
      <tr><th scope="row">Documentation</th><td>In progress</td></tr>
    </tbody>
  </table>
</div>

Striped table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

Project status
ProjectStatus
WebsiteIn review
DocumentationIn progress
HTMLSelect text to copy
<div class="table-scroll" role="region" aria-label="Project status, striped table" tabindex="0">
  <table data-table="striped">
    <caption>Project status</caption>
    <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><th scope="row">Website</th><td>In review</td></tr>
      <tr><th scope="row">Documentation</th><td>In progress</td></tr>
    </tbody>
  </table>
</div>

Bordered table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

Project status
ProjectStatus
WebsiteIn review
DocumentationIn progress
HTMLSelect text to copy
<div class="table-scroll" role="region" aria-label="Project status, bordered table" tabindex="0">
  <table data-table="bordered">
    <caption>Project status</caption>
    <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><th scope="row">Website</th><td>In review</td></tr>
      <tr><th scope="row">Documentation</th><td>In progress</td></tr>
    </tbody>
  </table>
</div>