Table

Overview

Tables are purposefully designed to display tabular data. They create an easy to read layout structure for processing information quickly and are especially handy for comparing information. The table has default and striped variations, as well as a version that allows the user to horizontally scroll within the table and a version that vertically stacks on mobile devices.

Examples

Default variation

Example
External Link
Heading 1 Heading 2 Heading 3 Heading 4
Row 1 / Cell 1 Row 1 / Cell 2 Row 1 / Cell 3 Row 1 / Cell 4
Row 2 / Cell 1 Row 2 / Cell 2 Row 2 / Cell 3 Row 2 / Cell 4
Row 3 / Cell 1 Row 3 / Cell 2 Row 3 / Cell 3 Row 3 / Cell 4 
<div class="table">
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 / Cell 1</td>
        <td>Row 1 / Cell 2</td>
        <td>Row 1 / Cell 3</td>
        <td>Row 1 / Cell 4</td>
      </tr>
      <tr>
        <td>Row 2 / Cell 1</td>
        <td>Row 2 / Cell 2</td>
        <td>Row 2 / Cell 3</td>
        <td>Row 2 / Cell 4</td>
      </tr>
      <tr>
        <td>Row 3 / Cell 1</td>
        <td>Row 3 / Cell 2</td>
        <td>Row 3 / Cell 3</td>
        <td>Row 3 / Cell 4</td>
      </tr>
    </tbody>
  </table>
</div>

Striped variation

Example
External Link
Heading 1 Heading 2 Heading 3 Heading 4
Row 1 / Cell 1 Row 1 / Cell 2 Row 1 / Cell 3 Row 1 / Cell 4
Row 2 / Cell 1 Row 2 / Cell 2 Row 2 / Cell 3 Row 2 / Cell 4
Row 3 / Cell 1 Row 3 / Cell 2 Row 3 / Cell 3 Row 3 / Cell 4 
<div class="table table--striped-even">
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 / Cell 1</td>
        <td>Row 1 / Cell 2</td>
        <td>Row 1 / Cell 3</td>
        <td>Row 1 / Cell 4</td>
      </tr>
      <tr>
        <td>Row 2 / Cell 1</td>
        <td>Row 2 / Cell 2</td>
        <td>Row 2 / Cell 3</td>
        <td>Row 2 / Cell 4</td>
      </tr>
      <tr>
        <td>Row 3 / Cell 1</td>
        <td>Row 3 / Cell 2</td>
        <td>Row 3 / Cell 3</td>
        <td>Row 3 / Cell 4</td>
      </tr>
    </tbody>
  </table>
</div>

Scroll variation

Example
External Link
Heading 1 Heading 2 Heading 3 Heading 4
Row 1 / Cell 1 Row 1 / Cell 2 Row 1 / Cell 3 Row 1 / Cell 4
Row 2 / Cell 1 Row 2 / Cell 2 Row 2 / Cell 3 Row 2 / Cell 4
Row 3 / Cell 1 Row 3 / Cell 2 Row 3 / Cell 3 Row 3 / Cell 4 
<div class="table-scroll">
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
          <th>Heading 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1 / Cell 1</td>
          <td>Row 1 / Cell 2</td>
          <td>Row 1 / Cell 3</td>
          <td>Row 1 / Cell 4</td>
        </tr>
        <tr>
          <td>Row 2 / Cell 1</td>
          <td>Row 2 / Cell 2</td>
          <td>Row 2 / Cell 3</td>
          <td>Row 2 / Cell 4</td>
        </tr>
        <tr>
          <td>Row 3 / Cell 1</td>
          <td>Row 3 / Cell 2</td>
          <td>Row 3 / Cell 3</td>
          <td>Row 3 / Cell 4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Stacked variation

Example
External Link
Heading 1 Heading 2 Heading 3 Heading 4
Row 1 / Cell 1 Row 1 / Cell 2 Row 1 / Cell 3 Row 1 / Cell 4
Row 2 / Cell 1 Row 2 / Cell 2 Row 2 / Cell 3 Row 2 / Cell 4
Row 3 / Cell 1 Row 3 / Cell 2 Row 3 / Cell 3 Row 3 / Cell 4 
<div class="table table--stack">
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 / Cell 1</td>
        <td>Row 1 / Cell 2</td>
        <td>Row 1 / Cell 3</td>
        <td>Row 1 / Cell 4</td>
      </tr>
      <tr>
        <td>Row 2 / Cell 1</td>
        <td>Row 2 / Cell 2</td>
        <td>Row 2 / Cell 3</td>
        <td>Row 2 / Cell 4</td>
      </tr>
      <tr>
        <td>Row 3 / Cell 1</td>
        <td>Row 3 / Cell 2</td>
        <td>Row 3 / Cell 3</td>
        <td>Row 3 / Cell 4</td>
      </tr>
    </tbody>
  </table>
</div>

Usage guidelines

Dos Donts
do iconDo use in situations where the cells can be filled with short amounts of text.
do-not iconAvoid filling the Table cells with long paragraphs of text if possible.
do iconDo ensure headings are clear and concise.
do-not iconDon’t use overly long headings.
do iconIdeal for use when comparing information.

Implementation guidelines

Name Class Description
Hover state .table--hover Lightly darken the Table rows on hover.
Striped rows .table--striped-even .table--striped-odd Table rows have alternating background colours.
Stack (responsive) .table--stack Horizontal scrolling on smaller devices. Apply to a containing element.
Scroll (responsive) .table-scroll Stack columns on smaller devices and become a horizontal Table with constant headings. Requires a thead element inside the Table to work correctly.