Warum die meisten Tabellen schlecht sind

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Warum sind Tabellen eigentlich so eine schlechte Idee als Mittel für das Webdesign? Dafür gibt es viele Gründe. Die wichtigsten sind:

  1. Sie führen zu unnötig langen Ladezeiten.
  2. Sie verführen zum Einsatz von uneffizienten »Platzhalter-Grafiken«, die den Seitenaufbau verzögern.
  3. Ihre Erzeugung und Pflege kann zum reinen Alptraum werden, weil nur kleinste Veränderungen im HTML das gesamte Layout der Seite zerschießen können.
  4. Sie können die Seite für Benutzer ohne grafische Browser unzugänglich machen.

Tabellen verursachen lange Ladezeiten

Nur den wenigsten Benutzern ist bewusst, dass ein Webbrowser so programmiert ist, dass er jede Tabelle nicht Schritt für Schritt, sondern als ganze Einheit vom Server herunterlädt. Auf diese Weise zeigt der Browser innerhalb einer Tabelle so lange nichts an, bis all ihre Bestandteile auf dem Zielrechner angekommen sind. (Anmerkung: Cascading Stylesheets Level 2 (CSS2) enthalten auch die Eigenschaft table-layout, die dieses Verhalten unter bestimmten Umständen verändern kann. Alle Details dazu finden Sie unter Referenz der CSS-Eigenschaften.)

Betrachtet man den eigentlichen Zweck von Tabellen, macht das durchaus Sinn. Tabellen sind in HTML eigentlich dafür vorgesehen, um Daten übersichtlich in Spalten und Zeilen nebeneinander zu stellen. Jede Zelle enthält einen Wert, der mit anderen Werten in der Tabelle verglichen oder verbunden wird. Einzelne, von anderen völlig unabhängige Datenfelder sind nicht vorgesehen, denn eine Tabelle sollte inhaltlich wie technisch eine ganze, in sich geschlossene Einheit darstellen.

Als Webdesigner anfingen, Großteile der Seiteninhalte in Tabellen unterzubringen, mussten sie sich also auf einige Konsequenzen gefasst machen. Zusätzlich zu der deutlichen Verzögerung durch das stufenlose Rendering einer verschachtelten Tabelle kann ihre schlichte Menge an HTML-Code längere Ladezeiten bewirken. Komplexe Tabellenlayouts zählen höchstwahrscheinlich zu den Hauptgründen für die langen Wartezeiten der Surfer im Netz.

Solche langen Ladezeiten zu vermeiden, wäre eine gute Sache.

Transparente Bilder bremsen aus

Selbst mit Hilfe von Tabellen ist es für Webdesigner nicht möglich, das Aussehen ihrer Seite so festzulegen, wie sie es sich eigentlich wünschen. Es kann etwa vorkommen, dass ein Designer um eine Tabellenzelle herum mehr Abstand benötigt als um die anderen in der gleichen Tabelle – was in HTML aber nicht vorgesehen ist.

Schon bald kam irgendeiner auf die Idee, mit der Bilddatei transparent.gif zu arbeiten – einem winzigen, transparenten GIF-Bild ohne sichtbaren Inhalt. Füllt man dieses in eine Tabellenzelle, kann man darin horizontal und vertikal zusätzliche Abstände erzwingen.

Richtig zum Problem wird das bei einer Tabelle mit Dutzenden (oder gar Hunderten) dieser Bilder. Der Einsatz von transparenten GIFs kann dann erhebliche Auswirkungen auf die Performance einer Webseite haben. Noch schlimmer ist aber, dass diese Technik wesentliche Bestandteile des Layouts auf feste Pixelgrößen definiert und sie mit Bildern überhäuft, die mit dem eigentlichen Inhalt der Website nichts zu tun haben. Dies alles hat ernsthafte Auswirkungen auf die Zugänglichkeit einer Website für behinderte Benutzer, für die es sehr schwer ist, den Sinn der verschachtelten Tabellen zu verstehen – doch dazu später mehr.

Tabellen pflegen ist ein Alptraum

Der dritte Grund, warum die meisten Tabellen schlecht sind, ist die schwierige Wartung von Webseiten mit tiefen Verschachtelungen. Wer Werkzeuge wie Macromedia Dreamweaver oder Adobe GoLive für das Erstellen und Verwalten seiner Site benutzt, kann das Chaos größtenteils ignorieren, weil er den HTML-Code nicht mehr direkt zu Gesicht bekommt. Aber selbst diese Programme sind nicht perfekt, und wenn sie erst einmal ein großes Chaos angerichtet haben, wird die Reparatur zu einer echten Herausforderung.

Wenn Sie wie die meisten Designer nur Ihrem eigenen Quellcode vertrauen und lieber tot umfallen würden, als einen HTML-Editor einzusetzen, dann dürften Ihnen die Probleme mit Tabellen gut bekannt sein.

Die Schwierigkeiten mit Tabellen liegen darin, dass sie aus einer relativ komplexen Menge an HTML-Elementen zusammengesetzt sind – selbst wenn sie nicht einmal verschachtelt sind. Wenn doch, dann ist das eine recht hässliche Angelegenheit.

HTML-Editoren, die im Gegensatz zu Programmierumgebungen keinen sauber lesbaren Quellcode generieren, erschweren die Situation beträchtlich. Das Finden von Anfangs- und Endpunkten von Tabellen, von speziellen Zeilen oder Zellen gestaltet sich schnell wie die Suche nach der berühmten Nadel im Heuhaufen. Und wenn am Ende nur noch die erfahrensten HTML-Experten weiterhelfen können, lösen können sie das Problem nicht, egal was sie tun.

Tabellen verursachen Probleme mit der Zugänglichkeit

Der vierte Grund, weshalb Tabellen vermieden werden sollten, ist in der Art begründet, wie nicht-grafische Browser, wie etwa Screenreader, die von vielen sehbehinderten Menschen verwendet werden, ein HTML-Dokument lesen. Wenn ein textbasiertes Gerät den Inhalt einer Seite liest, beginnt es am Anfang eines Dokuments und liest dann Zeile für Zeile. Wenn es an eine Tabelle kommt, beginnt es mit der ersten Tabellenzelle links oben und liest die Zeile entlang. Dann wird die zweite Tabellenzeile gelesen und so fort. Im Falle einer Tabelle, die korrekt für tabellarische Daten eingesetzt wurde, wird das selten zum Problem. Wenn aber verschachtelte Tabellen eingesetzt wurden, um Textteile in einem bestimmten Layout anzuzeigen, kann bei dieser Lesart blanker Unsinn herauskommen.

Wann Tabellen in Ordnung sind

Es gibt lediglich eine Ausnahme von der Regel, dass Tabellen an sich eine schlechte Sache sind.

Nur wenn Daten wirklich tabellarisch aufbereitet werden und dafür eine Darstellung nach deutlich sichtbaren Spalten und Zeilen erfolgen soll, ist eine Tabelle angebracht. Wenn Informationen am besten in einem Arbeitsblatt, wie beispielsweise in einer Excel-Tabelle, dargestellt werden können, sind das tabellarische Daten.

Meiner Meinung nach sollten (mit wenigen Ausnahmen) ausschließlich Zahlen- oder Textdaten in Tabellen eingesetzt werden und nicht etwa Grafiken, Multimedia, Formulare oder sonstige interaktive Schnittstellen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg