Tabellen

Eine Tabelle ist ein Element welches innerhalb des Hauptinhaltsbereiches der Seite verwendet wird. Tabellen dienen dazu Daten und/oder Texte in geordneter Weise darzustellen. Die dargestellten Inhalte werden in Zeilen und Spalten gegliedert und sind grafisch aneinander ausgerichtet.

Tabellen werden verwendet wenn Inhalte vergleichbar sind und sich Sinngemäß in verschiedene, übergreifende Inhaltsbereiche strukturieren lassen.
Sinnvolle Einsatzmöglichkeiten sind z.B.: Pläne, Kalendereinträge, komplexere Inhalte in Listenform, Angebote und Leistungen. Komplexere Tabellen sollten i.d.R. nicht mehr als 4 Spalten beinhalten. In Ausnahmefällen dürfen einfache Tabellen mit kurzen Eintragskombinationen z.B. Jahreszahlen und Prozentangaben, Mengen, etc. auch bis zu 5 Spalten besitzen. 

Es ist sinnvoll, sie zur besseren Kennzeichnung mit einer Überschrift oder einem Einleitungstext zu versehen. Die Quellenangabe für die Tabelleninhalte erfolgt in der Unterschrift. Die Angaben zur Tabelle sollten Rückschlüsse auf die Aktualität der abgebildeten Daten zulassen.

Zeile	Farbe
Erste Zeile	Weiß #FFFFFF
Zweite Zeile	Grau #F6F6F6
Dritte Zeile	Weiß #FFFFFF

 

Nach einer Tabellenüberschrift beginnen Tabellen grundsätzlich mit einem Tabellenkopf. Alle Zeilen sind durch verschiedene Hintergrundfarben optisch voneinander getrennt, wobei die Zeilen des Tabellenkörpers abwechselnd Weiß #fff und Grau #f6f6f6 sind. Die Hintergrundfarbe der Kopfzeile ist individiuell aus der Portalfarbe abgeleitet, jedoch stets dunkler als jener Grauwert. Die Tabelle erstreckt sich über das gesamte definierte Contentspaltenraster von links nach rechts, kann bei Bedarf jedoch auf eine feste Breite definiert werden.

Auf mobilen Endgeräten wird das horizontale Scrollen der ganzen Tabelle ermöglicht, um den Inhalt zu erfassen. Dazu werden die Scrollbalken auf mobilen Betriebssystem eingeblendet werden, da sie normalerweise erst sichtbar sind, wenn bereits gescrollt wird.

Aus dieser Berechnung ergeben sich die in der Tabelle aufgeführten Farbwerte.

Farbe des Tabellenkopfes in Abhängigkeit zur Portalfarbe

Farbschema	Farbwert des Hintergrundes des Tabellenkopfes
Blau	#e9eef4
Dunkelblau	#e9edf2
Grün	#ebf0eb
Dunkelgrün	#e9efea
Grau	#eeeeee
Ocker	#f2eee8
Orange	#f5ebe8
Rot	#f7efe9

Die Tabelle erstreckt sich über das gesamte definierte Contentspaltenraster von links nach rechts, kann bei Bedarf jedoch auf eine feste Breite definiert werden.

Auf mobilen Endgeräten wird das horizontale Scrollen der ganzen Tabelle ermöglicht, um den Inhalt zu erfassen. Dazu werden die Scrollbalken auf mobilen Betriebssystem eingeblendet, da sie normalerweise erst sichtbar sind, wenn bereits gescrollt wird.

Eine Tabelle muss eine klare Struktur haben um von sehbehinderten und blinde Benutzer erschloßen werden zu können. Außerdem muss die Bedeutung der Zeilen und Spalten fassbar und die Tabelle möglichst gut den Überschriften oder unterstützenden Kontextinformationen zu entnehmen sein. Alle Datentabellen, also jene die nicht allein zu Layoutzwecken eingesetzt werden, müssen also mit aussagekräftigen Zeilen bzw. Spaltenüberschriften ausgezeichnet werden. Screenreader informieren über die Position und Anzahl dieser Überschriftenreihen und lesen die (neue) Zeilen- oder Spaltenüberschrift vor, wenn der Benutzer die Tabellenzeile oder die Tabellenspalte wechselt. Die Lesereihenfolge ist demnach [Überschrift der Spalte] > [Überschrift der Zeile] > [Inhalt der Zelle].

Bedarf es einer Erklärung der Tabelle um den Zusammenhang von Zeilen zu Spalten zu verdeutlichen oder den Inhalt zu erklären, sollte diese mit einer Tabellenüberschrift versehen werden. Diese ist als eine Art Legende für alle Besucher sichtbar.

Eine Inhaltsübersicht bzw. Zusammenfassung ist nicht notwendig, da diese aus Überschriften oder dem begleitenden Text hervor gehen sollte.