Tabellen in Webseiten richtig einsetzen

richtiger einsatz tabellen htmlStruktur, Content und Layout sollten auf Webseiten strikt getrennt werden – das haben alle Webentwickler schon einmal gehört. Doch leider gibt es immernoch Einige, die nicht genau wissen, wann der Einsatz einer Tabelle sinnvoll ist, und wann nicht. Eines sollte aber allen klar sein: Tabellen sind nicht zum Layouten da.
Im heutigen Artikel möchte ich genau erklären wann eine Tabelle sinnvoll ist, und wann nicht. Außerdem möchte ich auch den Fortgeschrittenen Lesern ein paar bisher (vermutlich) unbekannte Tabellen-Elemente näher bringen, die die Usability von Tabellen erhöhen.

Wann ist eine Tabelle sinnvoll

Eine Tabelle ist immer dann sinnvoll, wenn Daten vom selben Daten-Typ dargestellt werden sollen. Beispielsweise die Bundesligatabelle (Tabelle mit Fußballmanschaften und der dazugehörigen Punktzahl)

Wann ist eine Tabelle nicht sinnvoll

Eine Tabelle ist nicht sinnvoll, wenn Daten mit verschiedenen Daten-Typ angezeigt werden sollen. Beispielsweise ist eine Einkaufsliste (Produkt, Menge) nicht sinnvoll, weil die Menge mal ein „Kg“, mal „Stück“ und mal „Liter“ sein kann [Quelle].
Bei sehr großen Tabellen kann es sinnvoll sein, diese in mehrere kleine Tabellen zu teilen. Dadurch kann zum die Lesbarkeit erhöht und die Ladegeschwindigkeit verringert werden. Mit Ladegeschwindigkeit meine ich die Zeit, die der Browser braucht um die Tabelle anzuzeigen. Bei Tabellen ist es so, dass sie erst angezeigt werden, wenn die letzte Information geladen wurde.

Die Tabellenelemente caption und summary

Tabellen sollten den folgenden Aufbau haben:








Überschrift




Spaltenname 1
Spaltenname 2
Spaltenname 3






ErgebnisXXX





111213


212223


313233

Im folgenden werde ich die Teile des Sciptschnipsels detailiert erklären:

HTML-Element: summary

Menschen, die normal sehen erkennen den Inhalt einer Tabelle meist mit einem Blick anhand der Struktur und der Kopfzeile. Menschen mit Sehbehinderung sind allerdings auf ihr Lesegerät angewiesen. In der Regel ließt ihnen dieses Gerät die Tabelle Zeile für Zeile vor. Weil das bei großen Tabellen sehr lange dauern kann, geben die Lesegeräte erst den Text, der in der summery 

steht, wieder. Dieser enthält eine knappe Zusammenfassung über den Inhalt der Tabelle. Dadurch kann der Nutzer sehr schnell entscheiden, ob die Tabelle für ihn nützlich ist. Falls sie nicht nützlich ist, kann er sie schnell überspringen.
HTML-Element: Colgroup
Das HTML-Element colgroup gibt es breits seit HTML4.0. Es gibt die Struktur der Tabelle an. Dadurch kann der Browser die Tabelle schneller aufbauen und darstellen.
HTML-Elemente: caption
Die Überschrift wird i.a. über der Tabelle angezeigt. Sie sollte mit möglichst wenig Worten sagen, was das Thema der Tabelle ist.
HTML-Elemente: THEAD, TBODY, TFOOT
Die Elemente THEAD, TBODY, TFOOT dienen der Gliederung der Tabelle. THEAD zeichnet den Kopfbereich, TBODY den Bereich der Daten und TFOOT die Fußzeile(n) aus.
Hinweis
Sämtliche besprochenen Elemente sind für die Funktionalität einer Tabelle nicht nötig. Sie erleichtern Menschen mit Behinderung die Nutzung der Tabelle aber enorm und sollten schon allein deshalb konsequent eingesetzt werden.
Fazit
Tabellen sollten nur den Zweck erfüllen, für den sie erfunden wurden – dem Darstellen von Daten. Dabei ist darauf zu achtet, dass möglichst alle Tabellen-Elemente vorhanden sind, damit die Tabelle auch von Menschen mit Behinderung sinnvoll genutz werden können.

Um mit gutem Beispiel voran zu gehen, werden deshalb alle Tabellen in dieses Projekts in der oben angegebenen Form in HTML ausgezeichnet.




 
Written by 










Schreibe einen Kommentar 
Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert
 
 



 


 
 
 


 






Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen 
Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.
Schließen











Überschrift