Skip to contentSkip to footer
Give feedbackv3.0.2

Tables

Tables are a great way to lay out information that may otherwise be confusing, and can also make information a lot easier to compare. They can however be more difficult for people with accessibility needs, so it's important to only use them where they are needed.

Putting long form text into a table should generally be avoided.

Basic table

It's important to use the th tag and scope attribute when defining a table heading. This is for both styling and accessibility.

Column heading Column heading Column heading
Table cell Table cell Table cell
Table cell Table cell Table cell
<table>
	<thead>
		<tr>
			<th scope="col">Column heading</th>
			<th scope="col">Column heading</th>
			<th scope="col">Column heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table cell</td>
			<td>Table cell</td>
			<td>Table cell</td>
		</tr>
		<tr>
			<td>Table cell</td>
			<td>Table cell</td>
			<td>Table cell</td>
		</tr>
	</tbody>
</table>

Table with two headers

1 2 3
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
<table>
	<thead>
		<tr>
			<td></td>
			<th scope="col">1</th>
			<th scope="col">2</th>
			<th scope="col">3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Table cell</td>
			<td>Table cell</td>
			<td>Table cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Table cell</td>
			<td>Table cell</td>
			<td>Table cell</td>
		</tr>
	</tbody>
</table>

Table with a footer

Footers on tables are useful in specific situations. This is easily defined with the tfoot tag. It's important to use this tag for styling and accessibility.

This example also shows right aligned cells, which is useful for numbers.

Budget table
Label £00.00
Total £00.00
<table>
	<thead>
		<tr>
			<th scope="col" colspan="2">Budget table</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Label</td>
			<td class="right">£00.00</td>
		</tr>
	</body>
	<tfoot>
		<tr class="total">
			<td>Total</td>
			<td class="right">£00.00</td>
		</tr>
	</tfoot>
</table>

Collapsible table

Tables can include collapsible rows by simply adding the correct classes and embedding a table within a cell.

th th
td td
td td
td td
td td
td td
td td
<table>
	<thead>
		<tr>
			<th scope="col">th</th>
			<th scope="col">th</th>
		</tr>
	</thead>
	<tbody>
		<tr class="table-collapse--toggle">
			<td>td</td>
			<td>td</td>
		</tr>
		<tr class="table-collapse">
			<!-- colspan is important to make the embedded table full width -->
			<td colspan="2">
				<table>
					<tr>
						<td>td</td>
						<td>td</td>
					</tr>
					<tr>
						<td>td</td>
						<td>td</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr class="table-collapse--toggle">
			<td>td</td>
			<td>td</td>
		</tr>
		<tr class="table-collapse">
			<!-- colspan is important to make the embedded table full width -->
			<td colspan="2">
				<table>
					<tr>
						<td>td</td>
						<td>td</td>
					</tr>
					<tr>
						<td>td</td>
						<td>td</td>
					</tr>
				</table>
			</td>
		</tr>
	</tbody>
</table>

Responsive tables

The best approach to responsive tables is simply horizontal scrolling. This can be achieved by wrapping the table in two divs, .table-responsive and .inner.

Column heading Column heading Column heading Column heading Column heading Column heading
Table cell Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
	<div class="inner">
		<table>
			<thead>
				<tr>
					<th scope="col">Column heading</th>
					<th scope="col">Column heading</th>
					<th scope="col">Column heading</th>
					<th scope="col">Column heading</th>
					<th scope="col">Column heading</th>
					<th scope="col">Column heading</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
				</tr>
				<tr>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

Responsive table with two headers

The example table with two headers can also be made responsive, where the left header sticks to the left of the page. This is done the same way as other responsive tables, but with the addition of the .sticky class on the outer div.

  1 2 3 4 5 6 7 8
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
4 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive sticky">
	<div class="inner">
		<table>
			<thead>
				<tr>
					<td> </td>
					<th scope="col">1</th>
					<th scope="col">2</th>
					<th scope="col">3</th>
					<th scope="col">4</th>
					<th scope="col">5</th>
					<th scope="col">6</th>
					<th scope="col">7</th>
					<th scope="col">8</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
				</tr>
				<tr>
					<th scope="row">4</th>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
					<td>Table cell</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>