Table
A table structures data in a way that is easy to scan and compare.
Usage
When to use
Use a table in the following cases:
- When there is a complex data set that the user needs to inspect.
- When there is data that only consists of many entries in the same data structure.
Types
There are the following table types:
Standard table
Use a standard table as a standalone component. A standard table fills all available space.
Table with leading column
Instead of a table header in the first row, it can be shown in the first column.
General construction
A table consists of the following elements:
1. Table head
- The table head describes the content in the column.
- Column headings match the text alignment in the column.
2. Table body
- The table body contains the table data.
- Text is left aligned.
- Numeric values align right and numeric identifiers, for example serial numbers, align left.
Options
The following table options are available:
Framed table
Inside of container elements use a framed table.
Small table
A small table is more compact as it can hold a larger number of rows in the same vertical space.
Small and framed table
A small table can also be shown within a container.
Table with alternating row
Alternating table rows help users scan and differentiate rows of data. A table with alternating rows can also be a framed table.
Do’s & Don’ts
- Use a table size that fits the amount of data it contains.
- Don’t use a page filling table if the individual columns are too far spread out.
- Align numeric values to the right and text to the left.
- Don’t left-align all data types.
- Present columns in a logical order.
- Don’t put secondary information to the front.
Style
This chapter shows several table styles in the design system.
Overview
Typography
The following table gives reference to the different font sizes and weights:
Name | State | Font-family | Font-size | Line-height | Text-align |
---|---|---|---|---|---|
Table head | all | Siemens Sans Bold | 14px | 20px | left |
Table body | all | Siemens Sans Roman | 14px | 20px | left |
Sizing and spacing
The following measurements show the dimensions for this component:
Standard table
The last column has a right spacing of 0px.
Framed table
The left spacing of the first cell of a framed table can be an increment of 8px.