Tables

Use tables to present structured data in rows and columns. Tables make it easier to compare and scan information.

Default Table

Tables use a clean design with horizontal borders to separate rows.

<table class="table">
  <thead>
    <tr>
      <th>Month</th>
      <th>Rates</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>£85</td>
      <td>£95,000</td>
    </tr>
    ...
  </tbody>
</table>

With Caption

Use a caption to describe the table's contents.

<table class="table">
  <caption class="table-caption">Dates and amounts of payments</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Numeric Data

Right-align numeric data for easier comparison.

<th style="text-align: right;">Population</th>
<td style="text-align: right;">45,200</td>

With Row Headers

Use <th> in the first column when rows need identification.

<tbody>
  <tr>
    <th>Passport renewal</th>
    <td>6 weeks</td>
    <td>1 week</td>
  </tr>
  ...
</tbody>

Complex Table with Scope

Use scope attributes for complex tables to improve accessibility.

<thead>
  <tr>
    <th scope="col">Region</th>
    <th scope="col">Q1</th>
    ...
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">North</th>
    <td>£12,000</td>
    ...
  </tr>
</tbody>

Usage Guidelines

Do

• Use tables for tabular data only
• Include a caption to describe the table
• Use scope attributes for complex tables
• Right-align numeric data
• Keep tables simple and scannable

Don't

• Don't use tables for layout
• Don't add unnecessary columns
• Don't use tables for simple lists
• Don't hide important data in middle columns

Accessibility

• Use <thead>, <tbody>, and <th> correctly
• Add a <caption> to describe the table
• Use scope="col" for column headers
• Use scope="row" for row headers
• Don't rely on colour alone to convey meaning

CSS Classes

/* Table */
.table { }

/* Caption */
.table-caption { }