Part of Components


A structured arrangement of detailed alphanumeric data in rows and columns.


Tables display alphanumeric information in an ordered arrangement of columns and rows. Every table has a header row that describes or categorizes the following column. Tables may have a footer row that describes, for instance, the total sum of the preceding columns.


Table 1. Generic example of a table

Heading 1 Heading 2
Data 1.1 Data 1.2
Data 2.1 long to test responsive on small screen Data 2.2 also long to test responsive on small screen
Data 3.1 Data 3.2
Data 4.1 Data 4.2
Data 5.1 Data 5.2
Total x.1 Total x.2
This is the table caption text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Usage guidelines


Every table needs columns, rows and cells. Cells show the relationship and intersection between information in the rows and columns.

Tables must also have row and column headers to describe the information and data that populates the cells.

Avoid blank cells as screen readers will read the space as blank.

On smaller screens

While tables automatically expand their widths based on the number of characters that each cell row contains, it could exceed the width of the container. This is commonly seen on devices with smaller screens. Solve this by using a horizontal overflow scroll.

Content guidelines

Add a table to a page when comparing data, statistics or information.

Table parts

  1. Table heading
    1. Mandatory, bolded – Example “Table 1. Table title
  2. Top row header
    1. Mandatory, bolded, max 50 characters with spaces
  3. Left row header
    1. Optional, bolded, max 50 characters with spaces
  4. Body cells
  5. Footer
    1. Optional
  6. Table notes
    1. Optional, use Caption component

Best practices

  • Build a simple table structure for accessibility purposes.
  • Avoid nesting a table within a table.
  • Avoid merged, split and blank cells.
Previous Typography