Table

Open this example in a new tab

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

Default Table

The default table includes horizontal lines.

Open this example in a new tab

The header row can be either dark or white depending on the brand color used as a background.

• Use govgr-table--light for white background color (default).
• Use govgr-table--dark for dark background color.

Table with light header

Open this example in a new tab

Table with dark header

Open this example in a new tab

Table captions

Use the <caption> element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.

There are other styling options for table captions. You can use the above classes to make table header larger or smaller depending on the preference. The default value for the table header is m (medium).

• Use govgr-table__caption--s class for small header in caption tag.
• Use govgr-table__caption--m class for medium header (default) in caption tag.
• Use govgr-table__caption--l class for large header in caption tag.
• Use govgr-table__caption--xl class for xlarge header in caption tag.

Open this example in a new tab

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 and create horizontal and vertical headers respectively.

• Horizontal headers can be used to create tables that have row header column.
• Vertical headers can be used to create tables that have both a header row and a header column. Note that the empty header cell on the top left corner has role="presentation" attribute.

Open this example in a new tab

Numbers in a table

When comparing columns of numbers, align the numbers to the right in table cells.

• Use govgr-table__header--numeric class in th tag.
• Use govgr-table__cell--numeric class in td tag.

Open this example in a new tab

Zebra rows

Zebra rows (alternating row colours) should be used on tables that have very long rows. It makes it easier to visually scan the table and follow rows.

• Use govgr-table--zebra class in table tag.

Open this example in a new tab

Vertical lines

Vertical lines can be used on tables that have a lot of columns or a lot of similar data (e.g. numbers).

• Use govgr-table--with-vertical-header and govgr-table--with-vertical-lines class in table tag.

Open this example in a new tab

Dense tables

If your table has a large amount of data, you can use the govgr-table--dense class to force mobile spacing on all screen sizes. This allows more data to fit into the view at the same time.

Open this example in a new tab

Custom column widths

You can use the width override classes to set the width of table columns.

• Use govgr-!-width-one-quarter class for one-quarter width.
• Use govgr-!-width-one-third class for one-third width,
• Use govgr-!-width-one-half class for one-half width.
• Use govgr-!-width-two-thirds class for two-thirds width.
• Use govgr-!-width-three-quarters class for three-quarters width.
• Use govgr-!-width-full class for full width.

Open this example in a new tab

Table container

Αvoid using tables that are too wide. Users might miss important information they need because some cells will be hidden from them. If you have no alternative, you can use a container class name for the table to contain the table in the width of the viewport.

Open this example in a new tab

You can also add the class govgr-table-container--border next to the govgr-table-container class to add a distinctive border at the container.

Open this example in a new tab