/
Tabelle

Tabelle

Owned by Graubünden Support
Last updated: Nov 14, 2023
5 min read

1       Grundlagen

1.1      Verhaltensweisen Sprachversionen

  • Behaviors: Ausklappen, um Verhaltensweisen zu definieren

  • Always visible:     Tabelle auf allen angelegten Sprachversionen der Webseite anzeigen

  • Hide for:               Tabelle auf bestimmten Sprachversionen der Sprachversionen ausblenden

  • Show for:              Tabelle auf bestimmten Sprachversionen der Webseite einblenden

Wie kann man einzelne Sprachen auswählen und entfernen?

Mehrere Sprachen selektieren: Ctrl gedrückt halten und Sprachen auswählen.

Mehrere Sprachen nacheinander markieren: Erste oder letzte Sprache der gewünschten Liste auswählen, Shift gedrückt halten und letzte respektive erste Sprache der gewünschten Liste auswählen.

Sprache nachträglich wieder aus Auswahl entfernen: Ctrl gedrückt halten und Sprache, die entfernt werden soll, auswählen.

1.2      Titel und In-Page-Navigations-Titel

  • Titel (optional)                              

  • Titel-Hierarchie:                                    H2 bis H6 (siehe Infobox unten)

  • In-Page-Navigations-Titel (optional): Nur für Detailseiten, Beispiel:

H2 bis H6

Wofür das H in H1, H2, H3 steht: Das «h» steht ganz einfach für «heading» (auf Deutsch «Überschrift»). Dabei gibt die Zahl die Hierarchie der unterschiedlichen Überschriften vor, 1 steht für die oberste Ebene, 6 für die niedrigste.

H2 bis H6 gliedern den Text und bieten Orientierung: Überschriften und Zwischentitel sind sowohl für User als auch für die Suchmaschinen wichtige Signale, die das Thema und die jeweiligen Unterthemen einer Webseite wiedergeben.

1.3      Tabelleneigenschaften und Caption

  • Tabelle hat Spaltentitel:  Die erste Zeile der Tabelle enthält die Titel für die Spalten darunter

  • Tabelle hat Zeilentitel:    Die erste Spalte der Tabelle enthält die Titel für die Zeilen daneben

  • Auf kleinen Viewports – zum Beispiel Smartphones – und in zusammengeklappten Tabellen nach Spalten statt nach Zeilen gruppieren

  • Table Caption:              Optionale Tabellen-Unterschrift, maximal 128 Zeichen, Beispiel:

Wichtig: Die Darstellung auch auf mobilen Endgeräten (Smartphones) kontrollieren. Bei Bedarf die Tabelleneigenschaften nachträglich anpassen. Tabellen eignen sich hervorragend, um Informationen übersichtlich und platzsparend – zum Beispiel auf kleinen Viewports zusammengeklappt – darzustellen.

1.4      Spalten und Zeilen

  • Hide row weights          Zeilengewichtung ausblenden → Reihenfolge der Zeilen per Drag and Drop

  • Show row weights:        Zeilengewichtung anzeigen → Reihenfolge der Zeilen über Nummerierung

  • Add Row:                    Zeile hinzufügen

  • Rebuild Table:            Zeilen (Rows) und Spalten (Columns) hinzufügen/entfernen → ab letzter Spalte bzw. unterster Zeile wird hinzugefügt bzw. entfernt

1.5      CSV importieren

Nur CSV-Dateien (Comma-separated values)

1.6      PDF hochladen und User zum Download zur Verfügung stellen

Anwendungsbeispiele: User sollen Programme und Preislisten, die in einer Tabelle aufgeführt werden, auch als PDF herunterladen können.

Tipp: Vor Upload Dateigrösse optimieren, beispielsweise mit Adobe Acrobat

2      Tipps und Tricks

2.1      Spaltenbreite steuern

Grundsätzlich wird die Spaltenbreite dynamisch nach Textlänge festgelegt. Wer geschützte Leerzeichen mit HTML schreibt, kann die Spaltenbreite etwas steuern. Es genügt, wenn beim längsten Text in einer Spalte geschützte Leerzeichen eingefügt werden.

Vorher:

Nachher:

Geschütztes Leerzeichen mit HTML schreiben:  

Beispiel oben: 10.00 bis 10.30 Uhr

Achtung: Darstellung auf mobilen Endgeräten (Smartphones) kontrollieren

2.2      Verlinkungen mit HTML integrieren

Link in neuem Fenster/Tab öffnen, unterstrichen:

<a href="https://www.graubuenden.ch/" target="_blank"><u>Das ist der Linktext</u></a>

Link im selben Fenster/Tab öffnen:

<a href="https://www.graubuenden.ch/" target="_self">Das ist der Linktext </a>

Wichtiger Hinweis: Wenn in der ersten Spalte eine Verlinkung integriert wird und die Tabelle auf schmalen Viewports zusammengeklappt dargestellt wird, ist die Verlinkung nicht optimal «klickbar».

2.3      Weitere Strukturierung mit HTML

Mit HTML können Tabellen strukturiert werden. Wichtig: Die Darstellung auf mobilen Endgeräten (Smartphones) kontrollieren. Nachfolgend einige Beispiele:

  • Fett:                      Text zwischen <b> </b> setzen, also <b>Text</b>

  • Kursiv:                  Text zwischen <i> und </i> setzen, also <i>Text</i>

  • Zeilenumbruch: <br>

Auch Bilder können in Tabellen integriert werden. Weil die Zeilenhöhe und die Darstellung im Zusammenspiel mit dem Text oft nicht optimal ist, ist davon abzuraten.

Beispiel mit HTML: <img src="/sites/graubuenden/files/2023-11/Logo-graubuendenparcs.png" alt="graubündenPARCS" width="150" height="150"> 

2.4      Layout-Verwendung

Das Tabellen-Modul kann theoretisch in allen Layouts verwendet werden. Empfohlen wird für das Tabellen-Modul jedoch primär das Standard-Layout «One Column». Das Layout «Two Columns 50/50» eignet sich für zwei aufeinanderfolgende Tabellen, die wenige und schmale Spalten aufweisen. Zudem sollte es gestalterisch zu den Modulen vor und nach den beiden Tabellen passen, Beispiel:

3      Anwendungsbeispiele

3.1      Fragen und Antworten (FAQ)

Vorteile: Spart insbesondere auf mobilen Endgeräten Platz und animiert zum Öffnen.

3.2      Veranstaltungsprogramm

3.3      Zahlen und Fakten

Vorteile: Spart insbesondere auf mobilen Endgeräten Platz und animiert zum Öffnen.

3.4      Preisliste

Dokumentation herunterladen: