Tables

The Table component is used to present data to users.

Mobile guidance

  • Tables are best suited for desktop users, because of this their use should be limited for customer facing content.
  • On mobile tables keep their format with the exception of a horizontal scroll bar that lets user view table content that spills off of the page.

Example

Header cell Header cell Header cell Header cell
Header cell Content cell Content cell Content cell
Header cell Content cell Content cell Content cell
Header cell Content cell Content cell Content cell
Footer Footer Footer Footer
HTML
<div class="table-wrapper">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Header cell</th>
        <th scope="col">Header cell</th>
        <th scope="col">Header cell</th>
        <th scope="col">Header cell</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Header cell</th>
        <td>Content cell</td>
        <td>Content cell</td>
        <td>Content cell</td>
      </tr>
        ...
    </tbody>
    <tfoot>
      <tr>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
      </tr>
    </tfoot>
  </table>
</div>