Skip to main content
Coat of arms of Barbados
Official government website
GovBB Design System

Table

Tables let users compare information in rows and columns.

Preview

Table

The Table component presents structured data with bold left-aligned headers, a navy rule under the header row and pale-blue hairline separators between rows. When the first column identifies each row, mark it up as a row header (<th scope="row">): it renders as a highlighted cell, and screen readers associate the row's cells with it. Always include a caption describing what the table shows, and use scope="col" on column headers.

When to use this component

Use a table to present data that users need to scan, compare or look up, for example fees, processing times or opening hours across several government services.

When not to use this component

Do not use a table for content that is not tabular, such as a list of steps or a set of links. Use a list instead. Do not use a table purely for visual layout. If you are showing a single set of key/value pairs, such as a user's answers, use the summary list component instead.

Wide tables

A table with many columns can be wider than a phone screen. Wrap it in a govbb-table-container so the table scrolls sideways inside the wrapper instead of forcing the whole page to scroll. Give the wrapper tabindex="0", role="region" and an aria-label so keyboard users can focus it and scroll, and screen readers announce what it contains.

Table that scrolls on small screens

Numeric columns

Add the --numeric modifier to a column's header and cells to right-align the values and use tabular figures, so digits line up for easy comparison.

Table with a numeric column