Table (advanced)

  1. Showroom Home
  2. Components
  3. Table (advanced)

Purpose

The Table (advanced) component offers a variety of editorial features within a table such as:

  • the number of columns and rows can be defined by the editor (the default setting is 2 columns and 5 rows)
  • columns can be grouped together, and it is possible to integrate a background color for columns (grey, light-blue, dark blue)
  • the editor can decide whether grouped columns should be displayed open or expandable
  • it is possible to integrate both text and images into the table elements
  • text can be edited with a Richt Text Editor, hyperlinks can be integrated, and text can be displayed as subscript or superscript
  • text and images can be displayed vertically and horizontally centered, left- or right aligned
  • beneath the table a legend can be integrated allowing the integration of both text and images
  • beneath the table footnotes can be integrated

Go directly to

Examples

The following examples show what the component can look like. Depending on the configuration, a component can be displayed in different ways.

Table (advanced) with Header Row and Footnotes

Text

Text

Text

Text

Text

 

Text

Text2

1,113

99.7

1,373

97.6

1,465

96.1

Text

 

1,394

87.7

1,651

81.0

1,826

75.5

Text

 

1,183

94.8

1,461

94.0

1,432

91.1

Text

 

1,210

94.6

1,450

95.1

1,452

90.9

1 Please integrate important footnotes here

Configuration

To create the component, follow the steps below. 

Table advanced Settings
  • Step 1
    Choose the following options within the Table (Advanced) Settings
    • a. Number of Columns
    • b. Number of rows
    • c. Header Row (This checkbox needs to be checked when the functionality Expand / Collapse should be used)
    • d. Legend
    • e. Footnotes
Column settings, Tab Layout
  • Step 2
    Choose the following options within the Column Settings (Tab Layout)
    • a. Choose the Preset Horizontal Alignment (either left, centered, or right. The default setting is left aligned)
    • b. Choose the Preset certical alignement (top, middle, or bottom)
    • c. Choose the highlighting (either none, default, or primary)
    • d. Check the checkbox to set a fix width
    • e. If the checkbox is checked please choose the percentage of the width
Column settings, Tab Expand/Collapse
  • Step 3
    Choose the following options within Columns Settings (Tab Expand / Collapse)
  • a. If wanted check the checkbox Expand / Collapse
  • b. If checked choose the number of columns to expand/collapse
  • c. Choose whether the Initial state should be Collapsed or Expanded
Table Cell, Tab Layout
  • Step 4
    Choose the following options within the Table Cell
  • a. Choose Cell Type (either data, or head)
  • b. Choose Horizontal alignment (either as defined in column, left, center, or right.)
  • c. Choose vertical alignment (either as defined in column, top, middle or bottom)
  • d. Choose the highlighting (either as defined in column, none, default or primary
  • e. Choose image (either no image, show image in front of text, show image after the text)
Table Cell, Tab Image
  • Step 5
    If Image is selected integrate the following information in the tab Image within the Table-cell component
  • a. Image Asset
  • b. Title
  • c. Alt-Text
  • d. Author
  • e. Location

 

Legend Item Settings
  • Step 6
    If Legend is selected integrate the following in the Legend Item
  • a. Explanation
  • b. Image Asset
  • c. Title
  • d. Alt Text
Footnotes at the bottom of the Table advanced
  • Step 7
    If Footnotes is selected use the Rich Text Editor to integrate the relevant Footnotes

Important Information for the use of images within the Table (advanced):

  • please use PNGs
  • icons should have the dimensions 32x32px
  • for images other than icons all dimensions can be used, should the image be bigger than the table cell, it will automatically be skaled down
Erinnerung für
Fehler Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.

Sollen wir Sie benachrichtigen wenn der Artikel verfügbar ist?

hh

Tag der Erinnerung
Zwei Tage vorher
Einen Tag vorher
Am Angebotstag
Uhrzeit
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Hinweise
  • line 1
  • line 2
  • ...

Eine Erinnerung ist nicht mehr möglich

Die Erinnerungszeiten für diesem Artikel sind bereits abgelaufen.

Erinnerung aktiv!

hh

Sie erhalten Ihre Erinnerung am ${date} um ${time} Uhr.

hh

Wir senden Ihnen noch eine Nachricht per E-Mail, um ihre E-Mail Adresse zu bestätigen. Bitte klicken Sie auf den Link in der Nachricht.

regions.regionSwitchHeadline

regions.regionSwitchText
regions.regionSwitchTextExplicitSwitch