Tabellen

Mit dem „Tabellen”-Modul lassen sich Tabellen entweder direkt* oder als Untermodul des „Text”-Moduls in die Seite einbinden. Zur Darstellung der Tabellen gibt es einige Varianten („Table Type”), die im Folgenden gezeigten werden. Mit einer Untervariante („Table Modifier”) kann die Textausrichtung gesteuert werden: alle Spalten linksbündig, rechtsbündige rechte Spalte, alle Spalten zentriert oder alle Spalten rechtsbündig. Im ersten Beispiel zum Typ A ist die letzte Spalte beispielhaft rechtsbündig ausgerichtet.

* bei direkter Einbindung ist das Layout „centered text” nicht verfügbar –daher bietet es sich meist eher an, das Tabellenmodul mit Hilfe des Textmoduls einzubinden.

Typ A: Zeilen und Spaltenüberschriften

Dieser Typ ist für mehrere Spalten ausgelegt, die Spalten verteilen sich gleichmäßig über die gesamte Tabellenbreite. Titelzellen sind links und optional oben möglich. Bei mobiler Darstellung wird jede Spalte zu einer einzelnen Tabelle, die mit den Zeilendaten befüllt ist.

Modifier: table--mobile--column-width-75-25

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--last-content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--center-content

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Typ A1: Zeilen und Spaltenüberschriften, dynamische Spaltenzahl

Ähnelt dem Typ A, die erste Spalte wird jedoch nicht gefettet dargestellt und ist breiter als beim Typ A. Die restlichen Spalten teilen sich die verbleibende Breite geichmäßig auf.

Modifier: table--mobile--column-width-75-25

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--last-content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--center-content

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Typ B: Nur Zeilenüberschriften

Dieser Typ ist für ein zweispaltiges Layout mit Zeilenüberschriften links gedacht. Die erste Spalte nimmt ein Viertel der Tabellenbreite ein und die zweite Spalte den verbleibenden Platz.

Modifier: table--mobile--column-width-75-25

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Modifier: table--last-content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Modifier: table--center-content

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Modifier: table--content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Typ C: Nur Spaltenüberschriften

Dieser Typ ist ebenfalls für ein zweispaltiges Layout einsetzbar, jedoch mit Spalten- statt Zeilenüberschriften. Die Spaltenüberschriften müssen allerdings manuell eingestellt werden. Dazu wird im Tabelleneditor der „Cell Type” auf „Header” umgestellt – siehe nachfolgende Screenshots. Mit dem Tabelleneditor läßt sich jeder Tabellentyp bearbeiten, das Ergebnis sollte dabei aber stets mit Hilfe der AEM-Funktion „View as Published” sorgfältig geprüft werden.

Modifier: table--mobile--column-width-75-25

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Modifier: table--last-content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Modifier: table--center-content

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Modifier: table--content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2

Typ D: 1. Spalte schmal, restliche Spalten dynamisch

Ein Typ für mehrere Spalten. Die erste Spalte ist sehr schmal, alle anderen Spalten teilen sich die restliche Breite. Zeilen- oder Spaltenüberschriften werden nicht automatisch gesetzt.

Modifier: table--mobile--column-width-75-25

Z1S1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Z2S1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Z3S1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--last-content-right

Z1S1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Z2S1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Z3S1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--center-content

Z1S1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Z2S1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Z3S1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--content-right

Z1S1 Zeile 1 / Spalte 2 Zeile 1 / Spalte 3
Z2S1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Z3S1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Typ E: dynamische Tabelle, mobil alle Zellen untereiander

Dieser Typ ist für mehrere Spalten ausgelegt. Alle Spalten nehmen eine dynamische Breite ein, basierend auf ihrem Inhalt. 

Modifier: table--mobile--column-width-75-25

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet. Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--last-content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet. Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--center-content

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet. Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3

Modifier: table--content-right

Zeile 1 / Spalte 1 Zeile 1 / Spalte 2 – Lorem ipsum dolor sit amet. Zeile 1 / Spalte 3
Zeile 2 / Spalte 1 Zeile 2 / Spalte 2 Zeile 2 / Spalte 3
Zeile 3 / Spalte 1 Zeile 3 / Spalte 2 Zeile 3 / Spalte 3
Headline 1 Headline 2 Headline 3
Text 1 Text 2 Text 3

Beispiele auf der PWS

Übersicht

Redaktionelle Richtlinien und Arbeitshinweise für Redakteure

Die Webseiten der Postbank sind stark auf den Online-Vertrieb fokussiert. Der Kunde soll über zielgerichtete Informationen und Darstellungen auf kurzem und einfachem Weg zum Produktabschluss gelangen. Die einheitliche Darstellung und Strukturierung der Webseiten sind dabei ein entscheidender Faktor.

Hauptaugenmerk für die Erstellung der Seiten sind immer die SEO-Optimierung und die mobile Darstellung („mobile first“). Die mobile Ansicht einer Seite ist also als primär anzusehen. Dies ist insb. bei Texten und Bildern zu beachten.

Die verbindlichen redaktionellen Vorgaben sind in folgendem Dokument zusammengefasst.

Release Notes

Die Release Notes werden nach jedem Release in ca. 4-6 wöchigen Abständen aktualisiert.

Sie umfassen nicht das gesamte Entwicklungspaket für die blauen und gelben Tenants, aber Auszüge, die für Briefende und Editoren relevant sind.

Letzte Aktualisierung am 21. September 23