Direkt zum Inhalt springen

Tabellen

Als Basis für jede Tabelle ist die Vorlage «Tabelle mit Überschriften» zu empfehlen. Sie verfügt bereits über eine Überschriftenzeile und ist auf kleinen Bildschirmen horizontal scrollbar.

Durch ergänzen der unten aufgeführten Klassen kann eine Standardtabelle mit verschiedenen Modifikationen versehen werden. Diese werden der Tabelle (via rechter Mausklick in Tabelle > Tabellen Eigenschaften > Erweitert > Stylesheet Klasse) als Klassenname mitgegeben.

Achtung

Tabellen sollten ausschliesslich für tabellarische Daten verwendet werden, und nie für reine Layoutzwecke (beispielsweise um Spalten oder Tabulatoren zu simulieren).

Standardtabelle

Überschrift Spalte 1 Überschrift Spalte 2 Überschrift Spalte 3
Text Text Text
Text Text Text
Text Text Text

Tabelle mit hervorgehobenem Mouseover

Überschrift Spalte 1 Überschrift Spalte 2 Überschrift Spalte 3
Text Text Text
Text Text Text
Text Text Text

Tabelle bekommt die Sylesheet-Klasse hover .

Tabelle mit alternierenden Zeilen

Überschrift Spalte 1 Überschrift Spalte 2 Überschrift Spalte 3
Text Text Text
Text Text Text
Text Text Text
Text Text Text

Tabelle bekommt die Sylesheet-Klasse zebra .

Tabelle mit Gitternetz-Linien

Überschrift Spalte 1 Überschrift Spalte 2 Überschrift Spalte 3
Text Text Text
Text Text Text
Text Text Text

Tabelle bekommt die Sylesheet-Klasse gitter oder tabelle2 (Legacy).

Sortierbare Tabelle

Name Vorname Jahrgang
Amacker Fridolin 1955
Bolli Xaver 1981
Müller Dieter 1968

Tabelle bekommt die Sylesheet-Klasse sortable .

Kombination der Klassen

Die oben genannten Tabellenklassen können grundsätzlich auch kombiniert werden. Wichtig ist dabei ein Wortabstand zwischen den einzelnen Klassennamen.

Name Vorname Jahrgang
Amacker Fridolin 1955
Bolli Xaver 1981
Müller Dieter 1968

Layout Tabelle (Legacy)

Muss eine Tabelle notfalls doch für andere Zwecke als tabellarische Daten missbraucht werden, ist darauf zu achten, dass keine Überschriften-/Kopfzeile (fett) mehr vorhanden ist. Mit der unten genannten Klasse werden alle Abstände und Rahmen der Tabelle zurückgesetzt.

Text Text
Text Text

Tabelle bekommt die Sylesheet-Klasse presentation . Via JS wird in diesem Fall automatisch auch das Attribut role="presentation" gesetzt, dass Assistiver Technologie hilft das Tabellenkonstrukt zu ignorieren, den Inhalt aber trotzdem wiederzugeben.