The Design System's table component make it easier to compare and scan information.
All tables must include a caption element that describes the table in the same way you might use a heading element. A well-written caption adds context to a table and makes it easier to understand.
Use table header elements to describe what the data in rows or columns represents. It is a good idea to use the
scope attribute to denote whether a header applies to a row or a column to help users of assistive technology.
In general mobile devices have room for around three columns of data, depending on the length of the data being presented. If there is a lot of data in a table it might not display well on small screens. There are two alternative displays you can use, depending on your use case.
In a scrolling table, if there are too many columns to display in the content area the first column becomes sticky while the rest of the table is allowed to scroll beneath it. For that reason the data in the first column should be broadly indicative of what the data in the column is about, as in this example where it is the name of the item being described in the row of data.
- Easy to compare data between rows.
- Table display is preserved.
- Requires additional interaction (scroll or swipe) from the user.
- Not all data is visible at once.
Collapse to boxes
In a table that collapses to boxes, the rows of the table are transformed into individual blocks of data.
- Provides an easily-digestable summary of the data.
- Difficult to compare data between rows, since they’ve now been transformed into boxes and separated.
- Does not look like a table. This non-standard display may be unfamiliar to users.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: firstname.lastname@example.org