Skip to main content


Tables display information in a grid-like format of rows and columns.



Class Font size Font weight Font color Text transform
Header Body-3/ 22dp regular/ 400 Gray 10 White
Title Case
Row Body-3/ 22dp regular/ 400 Gray 10 White
Link Text Body-3/ 22dp regular/ 400 Blue Light Highlight Blue
Underline on hover


Follow these rules, when aligning alphanumeric and numeric input types in a column:

  • Numerical data - right-aligned
  • Textual data - left-aligned
  • Align headers with their respective data
  • Center-align images, components, icons, and buttons when in their own columns.

Background color

Class Color
Header Gray Light Gray 8
List Table Row White Gray 10
Selected Row Blue Pale Highlight Blue
outline stroke Highlight Blue Highlight Blue
Row Hover Blue Pale Highlight Blue
Data Table Read-Only Row Gray 0 Gray 10
Data Table Editable Row White Gray 10

Note: Row striping is not recommended. It should be used as a last resort to increase contrast between data rows. If you need to use row striping make sure to retain appropriate contrast ratios (Accessibility)

  • Width: A table can have a set static width or dynamically fill the width of a page or screen. It is important to make sure that the cells have the appropriate settings to scale accordingly as well.
  • Height: The height of a table cell is inherited from the List Item size.
  • Dividers: The tables component comes with the option to show or hide dividers depending on preference and/or product needs.
  • Scrollable: Tables can be scrollable just like lists if they are at a fixed size. For more information, see List Scrolling.
  • stacking: - In some instances, it may be desirable to display a large amount of information in a limited horizontal space, such as a mobile phone. The compact display option for tables converts each row into a card, complete with its own header column. This is designed to scroll infinitely if needed.


Horizontal Filled Layout

Tables Horizontal

Compact Layout (Row Cards)

Tables Row - Compact Layout



  • Should be informative and descriptive.
  • Should be concise and scannable.
  • Should include units of measurement symbols so they aren’t repeated throughout the columns.
  • Should use sentence case (first word capitalized, rest lowercase)

Column content

  • Should be concise and scannable.
  • Shouldn’t include units of measurement symbols (put those symbols in the headers)
  • Should use sentence case (first word capitalized, rest lowercase)


  • Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others.