Tables

Basic tables

A basic table is very straightforward: remember to include a caption, add your table headers to ths in the thead and the main content in the tbody.

Just a normal table
Bathroom Meals Price per year
Ensuite Catered £6062
Shared Catered £5115.60
<table>
  <caption>Just a normal table</caption>
  <thead>
    <tr>
      <th>Bathroom</th>
      <th>Meals</th>
      <th>Price per year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ensuite</td>
      <td>Catered</td>
      <td>&pound;6062</td>
    </tr>
    <tr>
      <td>Shared</td>
      <td>Catered</td>
      <td>&pound;5115.60</td>
    </tr>
  </tbody>
</table>

Row headings

Tables can also have row headings

Room type Price per week Price per year
Economy Catered, shared bathroom £128 £5,116
Standard Self-catered, ensuite
Nursing and Midwifery students only
£132 £5,278
Catered, ensuite £168 £6,706
Catered, shared bathroom £152 £6,062
Premium Self-catered, ensuite
36 week let, room must be vacated at Easter
£135 £4,869
<table>
  <thead>
    <tr>
      <th colspan="2">Room type</th>
      <th>Price per week*</th>
      <th>Price per year*</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Economy</th>
      <td>Catered, shared bathroom</td>
      <td>£128 </td>
      <td>£5,116</td>
    </tr>
    <tr>
      <th rowspan="3">Standard</th>
      <td>Self-catered, ensuite<br>Nursing and Midwifery students only</td>
      <td>£132 </td>
      <td>£5,278</td>
    </tr>
    <tr>
      <td>Catered, ensuite</td>
      <td>£168</td>
      <td>£6,706</td>
    </tr>
    <tr>
      <td> Catered, shared bathroom</td>
      <td>£152</td>
      <td>£6,062</td>
    </tr>
    <tr>
      <th>Premium</th>
      <td>Self-catered, ensuite<br>36 week let, room must be vacated at Easter</td>
      <td>£135</td>
      <td>£4,869</td>
    </tr>
  </tbody>
</table>

Zebra striped tables

Alternate rows can be given a different background colour.

A striped table
Bathroom Meals Price per year
Ensuite Catered £6062
Ensuite Self-catered £1234
Shared Catered £5115.60
Shared Self-catered £5432
<table class="c-table--striped">
  <caption>A striped table</caption>
  <thead>
    <tr>
      <th>Bathroom</th>
      <th>Meals</th>
      <th>Price per year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ensuite</td>
      <td>Catered</td>
      <td>&pound;6062</td>
    </tr>
    <tr>
      <td>Ensuite</td>
      <td>Self-catered</td>
      <td>&pound;1234</td>
    </tr>
    <tr>
      <td>Shared</td>
      <td>Catered</td>
      <td>&pound;5115.60</td>
    </tr>
    <tr>
      <td>Shared</td>
      <td>Self-catered</td>
      <td>&pound;5432</td>
    </tr>
  </tbody>
</table>

Responsive tables

There are several techniques that can be used to ensure that your tables remain usable at small screen sizes. The technique to use will depend on the content of your table.

Prioritised columns

Add a .js-prioritised-table class to the table and a colgroup containing cols with appropriate visibility classes to make the table fit on smaller screens by hiding columns. You can use span attributes if required.

Showcasing a prioritised responsive table
Bathroom Meals Let length Colleges Price per week Price per year
Ensuite Catered 40 Derwent, Vanbrugh £151.55 £6062
Shared Catered 40 Derwent, James, Vanbrugh £127.89 £5115.60
Shared Self-catered 40 Derwent £103.11 £4124.40
Shared Breakfast only 40 Vanbrugh (Fairfax House) £115.22 £4608.80
<table class="js-prioritised-table">
  <caption>Showcasing a prioritised responsive table</caption>
  <colgroup>
    <col>
    <col span="2" class="is-hidden@tiny">
    <col span="2">
    <col class="is-hidden@small is-hidden@tiny">
  </colgroup>
  <thead>
    <tr>
      <th>Bathroom</th>
      <th>Meals</th>
      <th>Let length</th>
      <th>Colleges</th>
      <th>Price per week</th>
      <th>Price per year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ensuite</td>
      <td>Catered</td>
      <td>40</td>
      <td>Derwent, Vanbrugh</td>
      <td>&pound;151.55</td>
      <td>&pound;6062</td>
    </tr>
    <tr>
      <td>Shared</td>
      <td>Catered</td>
      <td>40</td>
      <td>Derwent, James, Vanbrugh</td>
      <td>&pound;127.89</td>
      <td>&pound;5115.60</td>
    </tr>
    <tr>
      <td>Shared</td>
      <td>Self-catered</td>
      <td>40</td>
      <td>Derwent</td>
      <td>&pound;103.11</td>
      <td>&pound;4124.40</td>
    </tr>
    <tr>
      <td>Shared</td>
      <td>Breakfast only</td>
      <td>40</td>
      <td>Vanbrugh (Fairfax House)</td>
      <td>&pound;115.22</td>
      <td>&pound;4608.80</td>
    </tr>
  </tbody>
</table>

Stacked tables

Cells are stacked vertically at small screen sizes and below.

A responsive table with stacked cells
Course Details Apply
Archaeological Information Systems
  • MSc
  • 1 year full-time
  • 2-3 years part-time
Apply
Archaeological Studies (by research)
  • MA
  • 1 year full-time
  • 2 years part-time
Apply
Archaeology
  • PhD
  • 3 year full-time
  • 6 years part-time
Apply
<table class="c-table--stacked">
  <caption>A responsive table with stacked cells</caption>
  <thead>
    <tr>
      <th>Course</th>
      <th>Details</th>
      <th>Apply</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><a href="#"><strong>Archaeological Information Systems</strong></a></p>
        <p>This programme is also available to study at <a href="#">Postgraduate Diploma or Postgraduate Certificate level</a>.</p>
      </td>
      <td>
        <ul>
          <li><abbr title="Master of Science">MSc</abbr></li>
          <li>1 year full-time</li>
          <li>2-3 years part-time</li>
        </ul>
      </td>
      <td>
        <a class="c-btn c-btn--small c-btn--primary" href="#">Apply</a>
      </td>
    </tr>
    <tr>
      <td>
        <p><a href="#"><strong>Archaeological Studies (by research)</strong></a></p>
      </td>
      <td>
        <ul>
          <li><abbr title="Master of Arts">MA</abbr></li>
          <li>1 year full-time</li>
          <li>2 years part-time</li>
        </ul>
      </td>
      <td>
        <a class="c-btn c-btn--small c-btn--primary" href="#">Apply</a>
      </td>
    </tr>
    <tr>
      <td>
        <p><a href="#"><strong>Archaeology</strong></a></p>
      </td>
      <td>
        <ul>
          <li><abbr title="Doctor of Philosophy">PhD</abbr></li>
          <li>3 year full-time</li>
          <li>6 years part-time</li>
        </ul>
      </td>
      <td>
        <a class="c-btn c-btn--small c-btn--primary" href="#">Apply</a>
      </td>
    </tr>
  </tbody>
</table>