Skip to content

Components / Table

Table

As much as web developers hate them, some data is best represented in tables. Use tables for large data sets or data that is best displayed in rows and columns, such as a collection of users with general contact information.

Customer Email Location Last activity
Emma Reed emma.reed@gmail.com Missouri Valley, Iowa a day ago
Ganesh Sarkar ganesh.sarkar@gmail.com Missouri Valley, Iowa a day ago
Jennifer Suarez jennifer.suarez@gmail.com Missouri Valley, Iowa a day ago
Bobby Erickson bobby.erickson@gmail.com Missouri Valley, Iowa a day ago
Mei Suzuki mei.suzuki@gmail.com Missouri Valley, Iowa a day ago

Structure

Variations

Small

Small tables include reduced padding on table cells for a tighter display of information. This is especially useful when you have several tables in a view with numerical data, such as login counts or ad views.

1a 1b 1c
2a 2b 2c
3a 3b 3c

Bordered

Bordered tables add vertical dividers between table cells in addition to the default horizontal dividers.

1a 1b 1c
2a 2b 2c
3a 3b 3c

Alignment

Content within the first cell of each row can be aligned to the same left edge as other content types. An example would be aligning avatars in the first cell of each row to the same edge as surrounding paragraphs.

1a 1b 1c
2a 2b 2c
3a 3b 3c

Stacked

To make viewing tables tolerable on smaller screens, use a stacked table within mobile views. Columns are displayed as rows with headings applied as labels.

This style is only activated on small viewports, so resize your browser to see it in action.

Name Email Last seen
Emma Reed ereed@example.com 2 hours ago
Jennifer Suarez jsuarez@example.com Yesterday
Sa Myung smyung@example.org 1 week ago

Stacked horizontal

Just like the stacked table, the stacked horizontal table displays table columns as rows. With this variant, though, the label and cell value appear on the same horizontal line.

This style is only activated on small viewports, so resize your browser to see it in action.

Name Email Last seen
Emma Reed ereed@example.com 2 hours ago
Jennifer Suarez jsuarez@example.com Yesterday
Sa Myung smyung@example.org 1 week ago

Behavior

Overflow tables

Overflow tables allow for horizontal panning without disrupting other layout elements.

Grid sizing

You can use the grid to set widths on table cells.

Note
Table sizing is tricky business. The browser may not respect the exact sizing of your table cell if the contents of other cells take up more space. It's a crapshoot.

Row emphasis

You can adjust the style of table rows to either be muted or stand out.

Name Email Last seen
Emma Reed ereed@example.com 2 hours ago
Jennifer Suarez jsuarez@example.com 2 hours ago
Sa Myung smyung@example.com 2 hours ago
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.