Skip to main content
Unified Design System
Search the Design System
Ver. 3.0.0 For the older version visit v2 documentation

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. Instead, use the grid system.

How it works

The component should only exist in the main section.

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 123456

HTML code

<table class="govcy-table">
    <thead>
        <tr class="govcy-br-input">
            <th scope="col">Property</th>
            <th scope="col">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>123456</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

# Expence Notes Amount
1 Server 120 GB RAM, xxx processor 5000
2 Monitor 22 inch 100
3 Keyboard Greek Layout 20

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">3</th>
            <td>Keyboard</td>
            <td>Greek Layout</td>
            <td class="govcy-text-end">20</td>
        </tr>
    </tbody>
</table>

Numbers in table

When comparing columns of numbers, align the numbers to the right in table cells using the govcy-text-end class. If you are using a vertical responsive table, consider using the govcy-text-md-end class, to right align only on desktops and larger.

Example

# Expence Notes Amount
1 Server 120 GB RAM, xxx processor 5000
2 Monitor 22 inch 100
2 Keyboard Greek layout 20

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 achieve this.

Vertical responsive tables

Vertical responsive tables place each cell of a row in a single column. This is the preferred method for responsive tables.

Make any table vertically responsive by adding a .govcy-table-responsive-vertical class in a table.

Example

Account Name Andreas Andreou
Bank Bank of Cyprus
International Bank Account Number (IBAN) CY**********************7654

HTML code

<table class="govcy-table govcy-table-responsive-vertical">
    <tbody>
        <tr>
            <th>Account Name</th>
            <td>Andreas Andreou</td>
        </tr>
        <tr>
            <th>Bank</th>
            <td>Bank of Cyprus</td>
        </tr>
        <tr>
            <th>International Bank Account Number (IBAN)</th>
            <td>CY**********************7654</td>
        </tr>
    </tbody>
</table>

Vertical responsive tables with headers

Using the .govcy-table-responsive-vertical class, will hide the table header in small viewports. If you wish to show the the headers while using this variant, you can add <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">{ HEADER-NAME }</div> in each cell as shown in the example below:

Example

Input Value
Input
Account Name
Value
Andreas Andreou
Input
Bank
Value
Bank of Cyprus
Input
International Bank Account Number (IBAN)
Value
CY**********************7654

HTML code

<table class="govcy-table govcy-table-responsive-vertical">
    <thead>
        <tr>
            <th>Input</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">Input</div>
                Account Name
            </td>
            <td>
                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">Value</div>
                Andreas Andreou
            </td>
        </tr>
        <tr>
            <td>
                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">Input</div>
                Bank
            </td>
            <td>
                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">Value</div>
                Bank of Cyprus
            </td>
        </tr>
        <tr>
            <td>
                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">Input</div>
                International Bank Account Number (IBAN)
            </td>
            <td>
                <div class="govcy-d-md-none govcy-fw-bolder govcy-my-2">Value</div>
                CY**********************7654
            </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

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>

Accessibility

Make sure:

  • you use table headers when applicable
  • you test your tables in smaller viewports, for example on mobile devices. Consider using a responsive table variant