Table

Data tables must be accessible. Each must have a <caption> element. It is permissable to use a heading element inside the <caption> so screen reader users can navigate to it using heading shortcuts. For the sake of avoiding redundancy, if you do use a heading element inside the <caption> you should no longer introduce the table with a heading.

<div class="ds-table">
  <table>
    <caption><h2>Basic table with column headers</h2></caption>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <!-- rows here -->
  </table>
</div>

Row headers

You can use either column headers (<th> in the above example), row headers (<th> with scope="row" on each row’s first child) or both.

<div class="ds-table">
  <table>
    <caption>Basic table with column headers</caption>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <th scope="row">Row 1 / row header</th>
      <td>Row 1 / cell 2</td>
      <td>Row 1 / cell 3</td>
    </tr>
    <tr>
      <th scope="row">Row 2 / row header</th>
      <td>Row 2 / cell 2</td>
      <td>Row 2 / cell 3</td>
    </tr>
    <tr>
      <th scope="row">Row 3 / row header</th>
      <td>Row 3 / cell 2</td>
      <td>Row 3 / cell 3</td>
    </tr>
  </table>
</div>

Responsiveness

Tables should retain their structure for comprehension. Ensuring they can be used and viewed with many columns, or in smaller viewports, the containing class="ds-table" element is scrollable along the horizontal axis.

Tables in cards

You can use a Card to “lift” a table and give it more affordance in the page.

<div class="ds-card ds-padded">
  <div class="ds-table">
    <table>
      <!-- table markup -->
    </table>
  </div>
</div>