Tables divide information into distinct columns and rows to create an intersection “cell” where data is displayed.

Tables are only one method for presenting many data points grouped together in a visual way. Other options include charts or graphs.

Tables serve a unique purpose of allowing easy organization or comparison of more complex data than a chart or graph. They can be read either vertically (by columns) or horizontally (by rows).

Tables work best when:

• Presenting sequential data
• Data being presented requires specific or precise values
• Individual values are being presented or compared
• Values across columns or rows require different units of measurement

Stacking tables

Since the nature of tables relies so much on visual space, there are several common variations that can be used to accommodate different types of data in a table.

A default table would “stack” the information on a smaller screen, since shrinking a table that maintained its columns/row structure would make it illegible.

Directory tables

When the data you’re presenting should only be read across the rows (instead of down columns), you can use a directory table. The first column in these tables is what organizes or labels the other data points in the row.

For instance, contact information is comprised of a name, phone number, and email address. An event is made up of the name of the event, time, and location. You need all three pieces of data to create an understanding of the thing being shown, and the first column of data is the key to that understanding.

The default stacking behavior on smaller breakpoints doesn’t maintain that “first column” importance since it stacks based on column headers.

As such, at the small screen breakpoint, the directory table pattern uses that first column data (employee name, for instance) as a way to group and label stacks of rows.

See guidance on styles for a a directory table and how it should look on smaller breakpoints.

Scrolling tables

When the data you’re presenting has more columns than what will comfortably fit on the screen, you can use a table that scrolls horizontally. This becomes especially important when thinking about tables on smaller screens, instead of allowing the data to stack at smaller breakpoints.

Using a table that scrolls ensures that all the information can be accessed in its original tabular structure, even on a smaller screen.

See guidance on styles for a table that scrolls horizontally at all screen sizes.

Sorting tables

Sorting allows users to reorder the contents of a table by a sortable column of their choice.

Any column that can sort needs to be specified in the table’s markup. When the table loads, it should be sorted by one of the sortable columns by default and indicate which column is already sorted. Not every column of a table needs to be sortable.

At large screen sizes, tables can be sorted using the header of any sortable column.

• The currently sorted column is marked with an up or down triangle for ascending and descending sorts, respectively
• On hover, the currently sorted column shows the opposite triangle
• Columns that can sort show an up triangle on hover
• Columns that cannot sort show nothing on hover

If sorting is needed for smaller screens, use a filter-like expandable with a sorting control (or add a sorting control to the existing filter if the table has one) that only appears when the table switches from tabular to stacked.

Filtering tables

Tables can be paired with a filter to show only rows that meet certain criteria.

Pagination

Tables with over 20 rows can be paired with pagination.

Creating accessible behaviors

Remember to always use headers (that is, <th> elements) for all data tables to make tabular data accessible.

As a rule, design tables so that they are easy to read. Label columns precisely and include units of measurement where necessary. Organize the data so that the underlying meaning is quickly apparent.

Labels and titles

Give tables a meaningful title that succinctly describes the content presented so that users can understand their purpose at a glance. If presenting more than one table within a page, consider adding labels (e.g. “Table 1,” “Table 2,” etc.) in addition to titles. Labels should precede titles (e.g. “Table 1: The title given to this table”).

Styles for labels and titles are found here.

Long column labels

Consider using fixed columns or truncation for column labels that are significantly longer than the expected width of the data.

Units of measurement

Make sure to indicate the unit of measurement. In terms of placement, if the units are the same across columns, indicate the unit of measurement in the title or someplace noticeable above the table.

Alternatively, if the table uses at most two units of measurement, consider using asterisks following the column label, and define the unit of measurement below the table, as shown in the example here.

If units differ from column to column, the standard is to list the unit of measure in parentheses following the column label. Make sure to use common abbreviations when indicating units of measure. Spell out any ambiguous or obscure abbreviations.

Default table and directory table (large screens)

This is the default style at the large screen breakpoint. It is also how the directory table pattern appears at the large screen breakpoint.

Header

• Background: Gray-05 #F8F8F8
• Font: Avenir Next Demi-bold, all caps
• Font-color: Black #101820
• Font-size: 14px

Border

• Bottom: 1px, Gray-50 #BABBBD on each row, including header

Cells

• Background: Gray-05 #F8F8F8
• Font: Avenir Next Regular Black
• Font-color: Black #101820
• Font-size: 16px
• Padding: 10px

Default table (small screens)

This is the default style for small screens. Remember to add data-label attributes to every <td> in the table body.

Border

• Bottom: 1px, Gray-50 #BABBBD

Cells

• Font: 16px Avenir Next Regular Black
• Font-color: Black #101820
• Labels font: 14px Avenir Next Regular, all caps
• Labels font-color: Black #101820

Padding

• Padding, label / content: 15px
• Padding, content / next label: 30px
• Padding, rule line / first label: 15px

Scrolling tables

• Border: 1px, Gray-50 #BABBBD around the scrolling table
• Alternate row striping: Grey-05 #F8F8F8

Directory tables (small screens)

• Bottom border: 1px, Gray-50 #BABBBD on each row
• Font: 16px Avenir Next Regular Black
• Font-color: Black #101820
• Header background color: #f1f1f1
• Labels font: 14px Avenir Next Regular, all caps
• Labels font-color: Black #101820
• Padding, column label/bottom border: 15px
• Padding, bottom border/content: 15px
• Padding, content / next label: 30px

Striped rows

Striping is useful to help the eye track across table rows. Use striping for tables that have more than five columns, or for tables with rows that are difficult to follow across the full width of the table.

• Alternate row background: Grey-05 #F8F8F8

Alignment

Right-align columns of numbers that contain quantities (counts, dollar amounts, percentages) or ordinals (ranks, item numbers).

Left-align columns of nominal numbers (ZIP codes, room numbers) or non-numeric values (names, phrases).

Fixed-width columns

Column widths are automatically set by browsers by default. If needed, some or all columns can be set to specific widths instead to accommodate longer data or labels.

Fixed-width columns at the 600 px breakpoint and less lose their custom widths and expand to full width. This is the same responsive pattern used for default tables at small screens.

Table labels and titles

• Label font: 14pt Avenir Next Demi Bold
• Label font-color: Black #101820
• Title font: 16px Avenir Next Regular
• Title font-color: Black #101820