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 for patterns and insights.
  • When there is data that only consists of many entries in the same data structure.

General construction

A table consists of the following elements:

table-usage-general-construction
1. Table head, 2. Table body with rows and columns

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.

Types

There are the following table types:

Standard table

Use a standard table as a standalone component. A standard table fills all available space.

tables-usage-type-standard
Standard table without frame

Framed table

Inside of container elements use a framed table.

tables-usage-type-framed
Framed table within a container element

Small table

A small table is more compact as it can hold a larger number of rows in the same vertical space.

tables-usage-type-small
Small table with narrow rows

Small and framed table

A small table can also be shown within a container.

tables-usage-type-small-framed
Small and framed table

Table with leading column

Instead of a table header in the first row, it can be shown in the first column.

tables-usage-type-leading-column
Table with leading column

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.

tables-usage-type-alternating-rows
Table with alternating rows

Do’s & Don’ts

table-usage-dos-table-spacing-1

table-usage-dos-table-spacing-2

  • 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.

table-usage-dos-alignment-1

table-usage-dos-alignment-2

  • Align numeric values to the right and text to the left.
  • Don’t left-align all data types.

table-usage-dos-order-1

table-usage-dos-order-2

  • Present columns in a logical order.
  • Don’t put secondary information to the front.

Style

This chapter shows several table styles in the MindSphere Design System.

Overview

table-style-standard-table
Standard table

table-style-framed-table-24
Framed table

table-style-small-table
Small table

table-style-small-framed
Small and framed table

table-style-leading-column
Table with leading column

table-style-alternating-rows
Framed table with alternating table rows

table-styles-standard-exapmle-in-app
Standard table in app

table-styles-framed-exapmle-in-app
Framed table in app

Color

The following table gives reference to the different colors and shades used:

Name State Property Color name
Table head, table body default Row separation lines Gray 400
Row Alternated Background color Gray 100
Table head, table body all Foreground color Gray 800

Typography

The following table gives reference to the different font sizes and weights used in the component:

Name State Font-family Font-size Line-height Text-align
Table head all Siemens Sans Bold 14px 20px left
Table body all Siemens Sans Regular 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.

table-style-standard-table-measurements
1. Table header cell, 2. Table body cell

Framed table

The left spacing of the first cell of a framed table can be an increment of 8px.

table-style-framed-table-measurements
1. Table header cell, 2. Table body cell

Small table

table-style-small-table-measurements
1. Table header cell, 2. Table body cell

Framed small table

table-style-framed-small-table-measurements
1. Table header cell, 2. Table body cell

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top