Skip to main content Red Hat Design System logo Contribute on Github

Table

Overview Style Guidelines Code Demos Accessibility

Style

Use a table to organize and display data efficiently in a grid with columns and rows. When using a table, consider the structure of the data and how to make it easy for a user to scan, examine, and compare. Although a table can share space with other components and content, consider giving a table extra space on the page to help a user view dense data.

Image of table with numbers next to various parts
  1. Title
  2. Column
  3. Column title
  4. Row
  5. Row title
  6. Cell
  7. Divider
  8. Caption

Column and row titles

Column and row titles should be a few words that describe the data in that column or row.

Image of various tables with no titles, column titles, row titles, and both

Table title and caption

The table title should make it clear to a user what the data is and what purpose it serves. A caption can be added under the table to provide more information about the data or its source.

Image of table with a title on top and a caption underneath

Theme

A table is available in both light and dark themes.

Light theme

Light theme table with black text on white surface

Dark theme

Dark theme table with white text on black surface

Scrolling

A scrollbar is visible if content exceeds the width or height of a table. Content can scroll horizontally, vertically, or both.

Image of various tables with a scrollbar on the right, on the bottom, and both

Space

A table has equal spacing within columns, rows, and in between divider lines. The same spacing is also maintained across large and small viewport sizes.

Image of table with spacers in between elements
Example Token Description
16 --rh-space-lg 16px spacer

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

On hover, cell rows and columns are highlighted with a semitransparent background color to make content easier to view.

In light theme, a row is highlighted in light gray on white surface colors and white on light gray surface colors. The column highlight remains light blue.

Light theme tables with hover effects on a white surface Light theme tables with hover effects on a light gray surface

On all dark theme surface colors, the row highlight is white, and the column highlight uses a dark blue.

Dark theme tables with hover effects on a black surface

Focus

Warning

A cell with focus does not display row and column highlighting unless it is hovered.

Light theme table cell in focus state Dark theme table cell in focus state
© 2021-2024 Red Hat, Inc. Deploys by Netlify