Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Table

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColumn and row titlesTable title and captionColor schemeScrollingSpaceInteraction statesStyleColumn and row titlesTable title and captionColor schemeScrollingSpaceInteraction states

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

Color scheme

A table is available in both light and dark color schemes.

Light scheme

Light scheme table with black text on white surface

Dark scheme

Dark scheme 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

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 scheme, 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 scheme tables with hover effects on a white surface Light scheme tables with hover effects on a light gray surface

On all dark color palettes, the row highlight is white, and the column highlight uses a dark blue.

Dark scheme 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 scheme table cell in focus state Dark scheme table cell in focus state
© 2021-2025 Red Hat, Inc. Deploys by Netlify