Tables

Tables make data content easier to scan.

This framework uses striped/zebra tables (alternating row colours).

Use <thead>, <tbody> and <tfoot> to improve how browsers display tables. They don't make tables more accessible.

There is guidance on making tables provided by the W3C.


This guidance is in part adapted from GOV.UK elements under Open Government Licence v3.0, and 18F Draft US Web Design Standards under CC0 1.0 Universal.

Basic table

Example

Population of Australian states and territories, December 2015
Location Population
New South Wales 7,670,700
Victoria 5,996,400
Queensland 4,808,800
Western Australia 2,603,900
South Australia 1,702,800
Tasmania 517,400
Northern Territory 244,000
Australian Capital Territory 393,000
Australia 23,940,300
<table class="content-table">
  <caption>
    Population of Australian states and territories, December 2015
  </caption>
  <thead>
    <tr>
      <th scope="col">Location</th>
      <th scope="col">Population</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>New South Wales</td>
      <td>7,670,700</td>
    </tr>
    <tr>
      <td>Victoria</td>
      <td>5,996,400</td>
    </tr>
    <tr>
      <td>Queensland</td>
      <td>4,808,800</td>
    </tr>
    <tr>
      <td>Western Australia</td>
      <td>2,603,900</td>
    </tr>
    <tr>
      <td>South Australia</td>
      <td>1,702,800</td>
    </tr>
    <tr>
      <td>Tasmania</td>
      <td>517,400</td>
    </tr>
    <tr>
      <td>Northern Territory</td>
      <td>244,000</td>
    </tr>
    <tr>
      <td>Australian Capital Territory</td>
      <td>393,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Australia</td>
      <td>23,940,300</td>
    </tr>
  </tfoot>
</table>

Calendar table

Example

New South Wales public holidays, January 2017
New Year's Day
New Year's Day holidayThe Holiday Act provides for an extra public holiday to be added when New Year's Day falls on a weekend.
Australia Day
<table class="calendar-table">
  <caption>New South Wales public holidays, January 2017</caption>
  <tr>
    <th scope="row">
      <time datetime="2017-01-01">Sunday <span>1</span> January</time>
    </th>
    <td>New Year's Day</td>
  </tr>
  <tr>
    <th scope="row">
      <time datetime="2017-01-02">Monday <span>2</span> January</time>
    </th>
    <td>New Year's Day holiday<span class="date-info">The Holiday Act provides 
      for an extra public holiday to be added when New Year's Day falls on a 
      weekend.</span>
    </td>
  </tr>
  <tr>
    <th scope="row">
      <time datetime="2017-01-26">Thursday <span>26</span> January</time>
    </th>
    <td>Australia Day</td>
  </tr>
</table>

Accessibility

Tables should be used for data, never design.

Consider more accessible ways to format content before using a table:

  • bullet points lists
  • numbered lists
  • definition lists.

Avoid tables with multiple header levels and spanned cells.

Headers & captions

Title tables using the <caption> element inside the <table> element.

Row and column headers should be set with the scope attribute.