Table with linked rowsStatusdevelopment

Guidance

Tables are a useful pattern for summarising a list of data, and sometimes it is necessary for each entry to link onwards to further details.

This pattern shows a way to mark up the table when the design requires the whole table row to be linked, rather than a single cell.

Example with linked rows

Open in a new tab

<div class="table__container"><table class="table table--has-caption"><caption class="table__caption">Example table</caption><thead class="table__head"><tr class="table__row"><th class="table__th" scope="col">Name</th><th class="table__th" scope="col">Job title</th><th class="table__th" scope="col">Date of birth</th><th class="table__th table__th--hidden" scope="col">Link</th></tr></thead><tbody class="table__bd"><tr class="table__row table__row--link"><td data-th="Name" class="table__td">Joe Example</td><td data-th="Job title" class="table__td">Web developer</td><td data-th="Date of birth" class="table__td">1 Jan 1970</td><td class="table__td table__td--link"><a class="table__link" href="#"><span class="visually-hidden">More details about Joe Example</span></a></td></tr><tr class="table__row table__row--link"><td data-th="Name" class="table__td">Joe Example</td><td data-th="Job title" class="table__td">Web developer</td><td data-th="Date of birth" class="table__td">1 Jan 1970</td><td class="table__td table__td--link"><a class="table__link" href="#"><span class="visually-hidden">More details about Joe Example</span></a></td></tr><tr class="table__row table__row--link"><td data-th="Name" class="table__td">Joe Example</td><td data-th="Job title" class="table__td">Web developer</td><td data-th="Date of birth" class="table__td">1 Jan 1970</td><td class="table__td table__td--link"><a class="table__link" href="#"><span class="visually-hidden">More details about Joe Example</span></a></td></tr><tr class="table__row table__row--link"><td data-th="Name" class="table__td">Joe Example</td><td data-th="Job title" class="table__td">Web developer</td><td data-th="Date of birth" class="table__td">1 Jan 1970</td><td class="table__td table__td--link"><a class="table__link" href="#"><span class="visually-hidden">More details about Joe Example</span></a></td></tr></tbody></table></div>

Acceptance criteria

The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the search behaves visually and functionally as expected.

For validation in developer tools / web inspector

The table should contain a
```
thead
```
element which wraps a row containing all
```
th
```
tags
Each
```
<th>
```
tag should have an appropriate scope attribute
The table should contain a
```
<tbody>
```
element which wraps all subsequent rows
The table should contain a
```
<caption>
```
element to summarise the table data
Each table row should contain only one
```
<a>
```
tag
The
```
<a>
```
tag should be within the last cell and should be accessibly labelled

For visual validation

Visually, the link should appear across the whole table row, with an appropriate hover effect to show that the row is clickable
A visual focus indicator should appear around the whole table row when the link is activated via the keyboard

For functional validation

The link should be reachable and possible to activate via keyboard
The link should be read by a screenreader without duplication of content

UI Patterns