Table of Contents

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">Das ist der Linktext</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 setzen, also Text
Kursiv: Text zwischen und setzen, also Text
Zeilenumbruch: 
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.