Navigieren auf digital.sbb.ch

Beta

Table

1. What does the component do?

Structured display of data.

2. When should the component be used?

  • It is used for displaying data and not for structuring content.
  • Tables should be structured so that they grow vertically (lines) when data sets are added.

3. Rules

  • Header text can be multi-line.
  • The background of the content lines alternates between white and grey. The first content line always starts with a white background.
  • Header and content texts can be left-aligned, right-aligned or centred within the table cell.
  • Legends and table captions are listed directly under the table left-aligned.
  • No images are permitted in tables.
  • Empty table cells are filled with a hyphen.
  • No accentuation or links are permitted in the header text.
  • Every column must have a header text (accessibility).
  • The following applies to table and mobile views: If the table is wider than the viewport and the first column is defined as a header column, the first column is fixed. The other columns can then be swiped to the left.
  • Units of measurement of content are shown in the column or line header.

4. Variants

4.1 Simple

Image of the table component as a simple table

Design specification

Code specification

4.2 Grouped

Image of the table component with sub-groups in the lines

Design specification

Code specification

4.3 Title – value

Image of the table component as a title value list

Design specification

ode specification