Tabellen
Tabellen sind ausschliesslich für tabellarische Daten zu verwenden. Aus Gründen der Zugänglichkeit/Barrierefreiheit sollten Tabellen zudem:
- Kopfzeilen (Überschriften für Spalten und/oder Zeilen) haben
- nur ein Datensatz pro Zelle enthalten
Achtung!
Tabellen düfen nicht für Layout-Zwecke missbraucht werden (beispielsweise um Inhalte nebeneinander zu stellen oder einen Tabulator zu ersetzen).
Standardtabelle
| Überschrift Spalte 1 | Überschrift Spalte 2 | Überschrift Spalte 3 |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
| Text | Text | Text |
Zebra-Tabelle
Wird der Tabelle die Klasse zebra mitgegeben, so werden die Zeilen alternierend farbig hinterlegt.
| Überschrift Spalte 1 | Überschrift Spalte 2 | Überschrift Spalte 3 |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
| Text | Text | Text |
Hover-Tabelle
Wird der Tabelle die Klasse hover mitgegeben, werden die einzelnen Zeilen beim Mouseover hervorgehoben.
| Überschrift Spalte 1 | Überschrift Spalte 2 | Überschrift Spalte 3 |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
| Text | Text | Text |
Tabelle mit zusätzlicher Überschrift
In den Tabellen-Eigenschaften kann der Tabelle auch noch eine eigene Überschrift zugewiesen werden.
| Überschrift Spalte 1 | Überschrift Spalte 2 | Überschrift Spalte 3 |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
| Text | Text | Text |
Tabelle mit zu breiten Inhalten
Bei Tabellen sollte immer ein besonderes Augenmerk auf die Länge der darin enhaltenen Inhalte gerichtet werden. Viele Spalten nebeneinander können die Tabelle sprengen; die Tabelle kann so über die eigentliche Inhaltsspalte hinauslaufen und so für Spaltenüberlagerungen oder (insbesondere bei Mobilgeräten) für horizontale Scrollbalken sorgen.
Lassen sich viele Spalten nebeneinander in Ausnahmen nicht vermeiden, oder haben die Zellen lange Inhalte (lange, untrennbare Wörter oder Links), so sollte die Vorlage «Tabelle mit Überschriften (responsive)» verwendet werden. diese ermöglicht innerhalb der Tabelle seitwärts zu scrollen.
| Überschrift Spalte 1 | Überschrift Spalte 2 | Überschrift Spalte 3 |
|---|---|---|
| Donaudampfschifffahrtsgesellschaft | Donaudampfschifffahrtsgesellschaft | Donaudampfschifffahrtsgesellschaft |
| Donau-Dampfschifffahrtsgesellschaft | Donau-Dampfschifffahrtsgesellschaft | Donau-Dampfschifffahrtsgesellschaft |
| Donaudampfschifffahrtsgesellschaftskapitän | Donaudampfschifffahrtsgesellschaftskapitän | Donaudampfschifffahrtsgesellschaftskapitän |
Tipps für zu lange Inhalte
- Wird unbedingt eine Tabelle benötigt, oder können die Inhalte der Spalten nicht auch ausserhalb der Tabelle mit Überschirften strukturiert vertikal abgebildet werden?
- Maskieren Sie lange Links immer hinter einem kurzen, lesbaren Begriff: zur Website anstatt http://www.tg.ch/xml_1/internet/de/application/d163/d6307/f6563.cfm
- Lange Wörter können mit einer «bedingten Trennung (siehe Vorlagen)» mit Silbentrennungen versehen werden, die nur sichtbar sind, wenn sie auch zum Einsatz kommen (Donaudampfschifffahrtsgesellschaftskapitän).