Tables

Tables are suitable for clearly structuring information. They can contain different numbers of rows and columns, depending on which data you want to display.

Druck

Example

example.jpg
Druck

Elements

elements.jpg
Within or in combination with the table, different text formats and links can be used.
a. Table headline (H3)
b. Table column titles
c. Copy, in bold and regular
d. Text links
e. Bullet point lists
f.  Numbered lists
g. Links
Druck

Table versions over 12 columns or content width

table versions.jpg

Depending on the information displayed, the table can have different quantities of rows and columns.
a. Example 4 columns and 3 rows with different copy styles and Links. The content runs over 12 grid columns.
b. Example 4 columns and 4 rows with text only.
c. Example 8 columns, the content runs across the whole browser width with a margin of 60 px left and right.

Row backgrounds are set in box grey and always run browser wide.

Druck

Table versions over 6 columns

table versions over 6.jpg
a. The tables can either run over 6 columns with bled off backgrounds to the left and right
b. or the backgrounds can run over 6 columns and the table elements are moved inwards.
 

The tables can be combined with each other or with other components like text or images.

responsive behaviour.jpg

Left: In the largest viewport, the table elements are oriented either along the grid or their interspaces.
a. 12 columns
b. content wide
c. 6 columns

Middle: In the next two viewports, the tables behave in the same fashion. If the grid or browser width is no longer sufficient for the display, a horizontal scroll bar is integrated with which the information can be displayed (see b).

Right: In the smallest viewport all tables run over 12 columns. The table titles are placed in the first column with a background box in light grey, while the other content is scrolled horizontally (see d).

Related topics

 

Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.