Tables

Basic Table

Example of a basic table with no header row. Should only be used in rare circumstances.

<table cellspacing="0">
  <tbody>
    <tr>
      <td>HMAS Sydney (II)</td>
      <td>Edited by McCarthy, Michael</td>
      <td>Western Australian Museum</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>HMAS Sydney (II)</td>
      <td>Edited by McCarthy, Michael</td>
      <td>Western Australian Museum</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

Basic Table With Header

Basic layout for a standard accessible tbale with a header row.

<table cellspacing="0">
  <thead>
    <tr>
      <th scope="col">Book Title</th>
      <th scope="col">Author</th>
      <th scope="col">Publisher</th>
      <th scope="col">Published</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HMAS Sydney (II)</td>
      <td>Edited by McCarthy, Michael</td>
      <td>Western Australian Museum</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

Responsive Table layout

This table has the optional classes which show and hide columns based on screen width.

As we fill in the content, we'll add descriptive classes to identify the essential and optional content. We'll assign these classes only to the headers. Notice that we added a second class to the Book Title header, persist. Essential columns are present by default at small screen sizes, but we'll still be able to toggle their visibility with the custom menu. Marking the Book Title column with this class provides a way for us to omit it from the menu, and prevent it from being hidden.

<div class="table-wrapper">
  <table cellspacing="0">
    <thead>
      <tr>
        <th class="essential persist" scope="col">Book Title</th>
        <th class="essential" scope="col">Author</th>
        <th scope="col">Publisher</th>
        <th class="optional" scope="col">Published</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HMAS Sydney (II)</td>
        <td>Edited by McCarthy, Michael</td>
        <td>Western Australian Museum</td>
        <td>2010</td>
      </tr>
    </tbody>
  </table>
</div>