This is a older version. Check out the latest version of the design system.
Table
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.
How it works
You can use the HTML below to create a table component.
Example
| Property | Value |
|---|---|
| Name | Jane Smith |
| Child's date of birth | 5 Jan 2021 |
| Address | Thornton |
| Social insurance number | 7361063 |
Sample HTML Code
<table class="govcy-table">
<thead>
<tr class="govcy-br-input">
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<th>Name</th>
<td>Jane Smith</td>
</tr>
<tr>
<th>Child's date of birth</th>
<td>5 Jan 2021</td>
</tr>
<tr>
<th>Address</th>
<td>Thornton</td>
</tr>
<tr>
<th>Social insurance number</th>
<td>7361063</td>
</tr>
</tbody>
</table>Table headers
Use table headers to tell users what the rows and columns represent. Use the scope attribute to help users of assistive technology distinguish between row and column headers.
Example
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Sample HTML Code
<table class="govcy-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>Numbers in a table
When comparing columns of numbers, align the numbers to the right in table cells.
Example
| # | Expence | Notes | Amount |
|---|---|---|---|
| 1 | Server | 120 GB RAM, xxx processor | 5000 |
| 2 | Monitor | 22 inch | 100 |
| 2 | Keyboard | Greek layout | 20 |
Sample HTML Code
<table class="govcy-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Expence</th>
<th scope="col">Notes</th>
<th scope="col" class="govcy-text-end">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Server</td>
<td>120 GB RAM, xxx processor</td>
<td class="govcy-text-end">5000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Monitor</td>
<td>22 inch</td>
<td class="govcy-text-end">100</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Keyboard</td>
<td>Greek layout</td>
<td class="govcy-text-end">20</td>
</tr>
</tbody>
</table>Responsive tables
Responsive tables allow tables to adjusting designs to accommodate screens of different sizes. Always use responsive tables, unless there is a specific reason not to.
There are two ways you can achive this.
Vertical responsive tables
Vertical responsive tables place each cell of a row in a single column. This is the prefered method for responsive tables.
Make any table vertically responsive by adding a .govcy-table-responsive-vertical class in a table.
Example
| Bank Details |
Account Name Andreas Andreou Bank Bank of Cyprus International Bank Account Number (IBAN) CY**********************7654 |
Change |
|---|---|---|
| Personal Details |
Email address abc@windowslive.com Mobile Number 99123456 |
Change |
| Claim Children |
George of no one |
Sample HTML Code
<table class="govcy-table govcy-table-responsive-vertical govcy-mb-4">
<tbody>
<tr>
<th scope="row" class="col-3">Bank Details</th>
<td class="col-7">
<p>
<span class="govcy-fw-bold">Account Name</span>
<span class="govcy-d-block">Andreas Andreou</span>
</p>
<p>
<span class="govcy-fw-bold">Bank</span>
<span class="govcy-d-block">Bank of Cyprus</span>
</p>
<p class="govcy-mb-0">
<span class="govcy-fw-bold">International Bank Account Number (IBAN)</span>
<span class="govcy-d-block">CY**********************7654</span>
</p>
</td>
<td class="col-2 govcy-text-sm-start govcy-text-md-end">
<a href="">Change</a>
</td>
</tr>
<tr>
<th scope="row" class="col-3">Personal Details</th>
<td class="col-7">
<p>
<span class="govcy-fw-bold">Email address</span>
<span class="govcy-d-block">abc@windowslive.com</span>
</p>
<p class="govcy-mb-0">
<span class="govcy-fw-bold">Mobile Number</span>
<span class="govcy-d-block">99123456</span>
</p>
</td>
<td class="col-2 govcy-text-sm-start govcy-text-md-end">
<a href="">Change</a>
</td>
</tr>
<tr>
<th scope="row" class="col-3">Claim Children</th>
<td class="col-7">
<p class="govcy-mb-0">
<span class="govcy-d-block">George of no one</span>
</p>
</td>
<td class="col-2 govcy-text-sm-start govcy-text-md-end"></td>
</tr>
</tbody>
</table>Horizontal responsive tables
Horizontal responsive tables allow tables to be scrolled horizontally with ease.
Make any table horizontally responsive across all viewports by wrapping a .govcy-table with .govcy-table-responsive.
Example
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Sample HTML Code
<div class="govcy-table-responsive">
<table class="govcy-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>