Content elements

Table

Open this table default example in a new tab
HTML
<div class="occlss-g-table-responsive">
  <table class="occlss-table">
    <thead class="occlss-table__head">
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="col">Council Tax Band</th>
        <th class="occlss-table__header" scope="col">Property Values</th>
        <th class="occlss-table__header" scope="col">Band D Proportion</th>
        <th class="occlss-table__header" scope="col">2017/18</th>
        <th class="occlss-table__header" scope="col">2018/19</th>
        <th class="occlss-table__header" scope="col">Change</th>
      </tr>
    </thead>
    <tbody class="occlss-table__body">
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">A</th>
        <td class="occlss-table__cell">Up to £40,000</td>
        <td class="occlss-table__cell">6/9</td>
        <td class="occlss-table__cell">£897.06</td>
        <td class="occlss-table__cell">£950.79</td>
        <td class="occlss-table__cell">£53.73</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">B</th>
        <td class="occlss-table__cell">Over £40,000 and up to £52,000</td>
        <td class="occlss-table__cell">7/9</td>
        <td class="occlss-table__cell">£1,046.57</td>
        <td class="occlss-table__cell">£1,109.26</td>
        <td class="occlss-table__cell">£62.69</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">C</th>
        <td class="occlss-table__cell">Over £52,000 and up to £68,000</td>
        <td class="occlss-table__cell">8/9</td>
        <td class="occlss-table__cell">£1,196.08</td>
        <td class="occlss-table__cell">£1,267.72</td>
        <td class="occlss-table__cell">£71.64</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">D</th>
        <td class="occlss-table__cell">Over £68,000 and up to £88,000</td>
        <td class="occlss-table__cell">9/9</td>
        <td class="occlss-table__cell">£1,345.59</td>
        <td class="occlss-table__cell">£1,426.19</td>
        <td class="occlss-table__cell">£80.60</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">E</th>
        <td class="occlss-table__cell">Over £88,000 and up to £120,000</td>
        <td class="occlss-table__cell">11/9</td>
        <td class="occlss-table__cell">£1,644.61</td>
        <td class="occlss-table__cell">£1,743.12</td>
        <td class="occlss-table__cell">£98.51</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">F</th>
        <td class="occlss-table__cell">Over £120,000 and up to £160,000</td>
        <td class="occlss-table__cell">13/9</td>
        <td class="occlss-table__cell">£1,943.63</td>
        <td class="occlss-table__cell">£2,060.05</td>
        <td class="occlss-table__cell">£116.42</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">G</th>
        <td class="occlss-table__cell">Over £160,000 and up to £320,000</td>
        <td class="occlss-table__cell">15/9</td>
        <td class="occlss-table__cell">£2,242.65</td>
        <td class="occlss-table__cell">£2,376.98</td>
        <td class="occlss-table__cell">£134.33</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">H</th>
        <td class="occlss-table__cell">Over £320,000</td>
        <td class="occlss-table__cell">18/9</td>
        <td class="occlss-table__cell">£2,691.18</td>
        <td class="occlss-table__cell">£2,852.38</td>
        <td class="occlss-table__cell">£161.20</td>
      </tr>
    </tbody>
  </table>
</div>

When to use this component

A table must only be used for displaying tabulated data. A table is a very good way of displaying complex data but think carefully before using one. How will the table display on a mobile device or for people using a screen reader? Is there a better way to present the information?

When not to use this component

The table component must not be used for page layout.

Zebra-striped table example

Open this table zebra example in a new tab
HTML
<div class="occlss-g-table-responsive">
  <table class="occlss-table occlss-table--zebra">
    <caption class="occlss-table__caption">Council Tax</caption>
    <thead class="occlss-table__head">
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="col">Council Tax Band</th>
        <th class="occlss-table__header" scope="col">Property Values</th>
        <th class="occlss-table__header" scope="col">Band D Proportion</th>
        <th class="occlss-table__header" scope="col">2017/18</th>
        <th class="occlss-table__header" scope="col">2018/19</th>
        <th class="occlss-table__header" scope="col">Change</th>
      </tr>
    </thead>
    <tbody class="occlss-table__body">
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">A</th>
        <td class="occlss-table__cell">Up to £40,000</td>
        <td class="occlss-table__cell">6/9</td>
        <td class="occlss-table__cell">£897.06</td>
        <td class="occlss-table__cell">£950.79</td>
        <td class="occlss-table__cell">£53.73</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">B</th>
        <td class="occlss-table__cell">Over £40,000 and up to £52,000</td>
        <td class="occlss-table__cell">7/9</td>
        <td class="occlss-table__cell">£1,046.57</td>
        <td class="occlss-table__cell">£1,109.26</td>
        <td class="occlss-table__cell">£62.69</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">C</th>
        <td class="occlss-table__cell">Over £52,000 and up to £68,000</td>
        <td class="occlss-table__cell">8/9</td>
        <td class="occlss-table__cell">£1,196.08</td>
        <td class="occlss-table__cell">£1,267.72</td>
        <td class="occlss-table__cell">£71.64</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">D</th>
        <td class="occlss-table__cell">Over £68,000 and up to £88,000</td>
        <td class="occlss-table__cell">9/9</td>
        <td class="occlss-table__cell">£1,345.59</td>
        <td class="occlss-table__cell">£1,426.19</td>
        <td class="occlss-table__cell">£80.60</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">E</th>
        <td class="occlss-table__cell">Over £88,000 and up to £120,000</td>
        <td class="occlss-table__cell">11/9</td>
        <td class="occlss-table__cell">£1,644.61</td>
        <td class="occlss-table__cell">£1,743.12</td>
        <td class="occlss-table__cell">£98.51</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">F</th>
        <td class="occlss-table__cell">Over £120,000 and up to £160,000</td>
        <td class="occlss-table__cell">13/9</td>
        <td class="occlss-table__cell">£1,943.63</td>
        <td class="occlss-table__cell">£2,060.05</td>
        <td class="occlss-table__cell">£116.42</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">G</th>
        <td class="occlss-table__cell">Over £160,000 and up to £320,000</td>
        <td class="occlss-table__cell">15/9</td>
        <td class="occlss-table__cell">£2,242.65</td>
        <td class="occlss-table__cell">£2,376.98</td>
        <td class="occlss-table__cell">£134.33</td>
      </tr>
      <tr class="occlss-table__row">
        <th class="occlss-table__header" scope="row">H</th>
        <td class="occlss-table__cell">Over £320,000</td>
        <td class="occlss-table__cell">18/9</td>
        <td class="occlss-table__cell">£2,691.18</td>
        <td class="occlss-table__cell">£2,852.38</td>
        <td class="occlss-table__cell">£161.20</td>
      </tr>
    </tbody>
  </table>
</div>

Changelog

2.4.8

  • the font style for the table caption changes
  • occlss-table–zebra mod class added

1.0.0

  • Component added