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

Table

Overview Style Guidelines Code Demos Accessibility

Usage

A table is a set of data that can be easily scanned and compared. Each row in a table represents an item and each cell of that row is an attribute of that item. This means that cells in a particular column will be the same data type such as dates, numerals, text, etc. Ideally, there should be one value per cell. If there is more than one piece of information within a cell, use another component.

Number of columns or rows

There is no maximum number of columns or rows. To reduce cognitive load and a cluttered user interface, set a max-width or max-height after five or six of each.

Image of table with a section of columns and rows highlighted

Padding

In some edge cases, table rows can have double padding if there are more element types than just text.

Image of two tables, one with default vertical padding and the other one with double vertical padding

Writing content

Column and row titles

Titles should be concise, scannable, and descriptive of content in the column or row. Header labels should have two or three words maximum. If more words are included, the label might break to a second line.

Image of two tables with examples of short and long column and row titles

Character count

In general, header labels should be as short as possible. However, if columns have more width, more words can be added.

Column count Character count (including spaces)
Two 40 - 50
Four 20 - 30
More than four 10 - 20

Layout

Placement

A table should be the same width as nearby blocks of content on the page.

Image of examples of placeholder content and a table having the same width, one is wide and one is narrow

Scrolling

A table will scroll horizontally or vertically if content exceeds the max-width or max-height.

Image of two tables, one with no scrolling and the other with scrolling columns and rows

Logos

Logos can be used in cells along with text if necessary.

Image of table with logos and links among text

Behavior

Column sorting

Columns can be sorted in ascending or descending order. Sorting controls are located in the column headers and the icon indicates the current sorted state. A sorted table has three states:

  • Unsorted (both arrows visible)
  • Sorted up (arrow pointing up)
  • Sorted down (arrow pointing down)
Image of tables with various sorting options

Responsive design

Large viewport sizes

Image of table on large viewport sizes

Small viewport sizes

Image of table on small viewport sizes

Best practices

One-column table

A table should display at least two columns.

Image of table with one column which is incorrect usage

Large cell height

In some edge cases, a table can have large cell height if there are more element types than just text.

Image of table with lots of vertical padding which is incorrect usage

Wrong size

Do not use the small viewport size table on large viewports.

Image of small viewport table used on a large viewport which is incorrect usage
© 2021-2024 Red Hat, Inc. Deploys by Netlify