Table

Using the Widget

Tables group content together in a visual format for users to see relationships and for easier understanding. Data does not need to be entered in every cell if so desired.

Widget Components

Row/Column Data

Table header is the first row or first Column

Do:

  • Keep table headers short as possible. If you have 4 or more columns, long table headers will get harder to read at smaller screen sizes.
  • Only use for data that must be compared/grouped by multiple things. Avoid using tables when headings/body copy would suffice.

Don’t

  • Avoid using a table with too many rows/columns. This could potentially be broken into multiple tables/pages.

 

Table with First Row as the Header

Table Caption Lorem Ispum
Header 1 Header 2 Header 3
Data 1-1 Data 1-2 Data 1-3
Data 2-1 Data 2-2 Data 2-3

Table with First Row as the Header, Incomplete Data

Table Caption Lorem Ispum
Header 1 Header 2 Header 3
Data 1-1 Data 1-2
Data 2-1 Data 2-2 Data 2-3

Table with First Column as the Header

Without first column as header
Header 1 Data 1-1 Data 1-2
Header 2 Data 2-1 Data 2-2
Header 3 Data 3-1 Data 3-2