Use the table component to make information easier to compare and scan for users.
When to use this component
Use the table component to let users compare information in rows and columns.
When not to use this component
Never use the table component to layout content on a page.
Formatted example
Department | Email address | Name of chair |
---|---|---|
Department 1 | one@department.gov.uk | Jo Bloggs |
Department 2 | two@department.gov.uk | Flo Toggs |
HTML code
<table>
<thead>
<tr>
<th>Department</th>
<th>Email address</th>
<th>Name of chair</th>
</tr>
</thead>
<tbody>
<tr>
<td>Department 1</td>
<td><a href="mailto:one@department.gov.uk">one@department.gov.uk</a></td>
<td>Jo Bloggs</td>
</tr>
<tr>
<td>Department 2</td>
<td><a href="mailto:two@department.gov.uk">two@department.gov.uk</a></td>
<td>Flo Toggs</td>
</tr>
</tbody>
</table>
Markdown
| Department | Email address | Name of chair |
|--------------|-----------------------|---------------|
| Department 1 | one@department.gov.uk | Jo Bloggs |
| Department 2 | two@department.gov.uk | Flo Toggs |