Table vs. No-Table
Ein großer Teil der Webseiten, die Sie beim Surfen im Web antreffen, ist ganz ähnlich aufgebaut – Seitenkopf, drei Spalten, Seitenfuß.
Ohne CSS, also mit purem HTML, ist ein derartiger Seitenaufbau nicht möglich – es sei denn, man nutzt dafür Tabellen. Allerdings ist dies nicht der Sinn von Tabellen, sie sind ein logisches Element zur Darstellung tabellarischer Daten. Die Nutzung von Tabellen als Layout-Gerüst ist bestenfalls eine „Krücke” (Puristen sprechen auch von „Missbrauch”) und kann u.U. zu schweren Darstellungsproblemen führen, vor allem bei Anwendern mit einem Text-Browser, Screenreader oder sonstigen alternativen Ausgabegeräten, da die Layout-Tabellen nicht korrekt linearisiert werden können, d.h. die Inhalte werden nicht spaltenweise sondern zeilenweise ausgegeben.
Weitere offensichtliche Nachteile
Lange Ladezeiten: Die Inhalte werden erst angezeigt, wenn die komplette Tabelle errechnet ist („rendering”). Dies kann bei sehr komplexen oder vielfach verschachtelten Tabellen dazu führen, daß der Anwender vor einer leeren Seite sitzt, auf der sich nichts zu rühren scheint. Eventuell verlieren Sie diesen Anwender bereits, bevor er überhaupt etwas von Ihren Inhalten wahrgenommen hat.
Aufwendiger Quellcode: Nicht nur das Erstellen, Lesen, Erweitern und Bearbeiten des Codes wird schwieriger, auch die Größe der Datei kann durch komplizierte Tabellen-Gerüste enorm zunehmen. Fehler schleichen sich schneller ein und sind umso schwerer zu finden.
Erzwungene Workarounds: Das Streben nach einem Browser-übergreifenden „pixelgenauen Layout” führt zu immer aufwändigeren Verschachtelungen, Hilfszellen mit Platzhalter-Grafiken (sog. „Blind-Gifs”) und häufig auch zu einer Beschneidung der Funktionalität. Primäres Opfer ist oft die Skalierbarkeit der Schriften, da freie Skalierbarkeit dazu führen kann, daß Texte ihre fixierten Zellen sprengen und „ineinander fließen”.
Vergleichen Sie selber!
Als Beispiel habe ich eine Seite mit einem Tabellen-Layout nachempfunden. Schauen Sie sich den Quellcode dieser Testseite an.
Den Quelltext erreichen Sie nach Aufruf der Seite über das Menü:
Ansicht | Quelltext (ALT + A, Q).
Um dies weiter zu veranschaulichen, habe ich die Analyse einer Kundenpräsenz aufbereitet. Vielleicht hilft diese Darstellung, die Tragweite einer Umstellung auf tabellenfreies Layout besser einzuschätzen.
Prüfen Sie doch einfach mal ein paar Websites, gerne auch die von großen und/oder kommerziellen Anbietern. Wie sehen diese Seiten in einem Textbrowser aus? Was sagen die HTML- und CSS-Validatoren des W3C dazu? Bestehen sie einen Zugänglichkeitstest?
Wenn Sie keinen Textbrowser (zum Beispiel Lynx) installiert haben, rufen Sie folgenden URL auf:
http://www.delorie.com/web/lynxview.html
Die HTML- und CSS-Tests können Sie hier durchführen:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Wie es um die Zugänglichkeit (Accessibility) bestellt ist, sagt Ihnen Bobby:
http://www.cast.org/bobby/
Auf all diesen Seiten finden Sie eine Eingabemaske, in die Sie einfach die zu prüfende Web-Adresse eingeben. Nach kurzer Wartezeit erhalten Sie eine Auswertung der Seite in Form eines Reports, mit einer Liste aller möglichen Fehlerursachen und Tipps zur Bereinigung. Allerdings kann es auch passieren, dass „Keine Auswertung möglich” ist – dies bedeutet, dass es wirklich schwerwiegende und grundsätzliche Fehler im Aufbau der Seite gibt.
Anhang: Beschreibung der Bildtafeln
Eine Startseite mit Layout-Tabellen – Diese Testseite zeigt eine Startseite, die mit Tabellen gebaut wurde, um das Prinzip zu veranschaulichen. Schauen Sie sich den Quellcode an!