Die Vorzüge von Technologien für die Web-Entwicklung wie CSS und XHTML werden als das Nonplusultra angepriesen, aber es gibt immer noch sehr viele Entwickler, die sich bei ihren Layouts auf die bewährten HTML-Tabellen verlassen. Im Folgenden sollen die jeweiligen Vorteile von HTML-Tabellen und CSS-Layouts einander gegenübergestellt werden.
Wer sich zum ersten Mal mit Web-Entwicklung beschäftigt, wird erstaunt sein, wie leistungsfähig und flexibel HTML-Tabellen sind. Sie können beliebig ineinander verschachtelt werden, um das gewünschte Ergebnis zu erzielen. Probleme mit leeren Tabellenzellen, die von einigen Browsern nicht korrekt angezeigt werden, bekommt man mit unsichtbaren GIFs schnell in den Griff. Allerdings ist die Gestaltung des Layouts nicht der eigentliche Zweck, zu dem HTML und die entsprechenden Tabellen entwickelt wurden.
HTML-Tabellen waren ursprünglich dafür gedacht, Daten in Tabellenform zu präsentieren - nicht mehr und nicht weniger. Wenn man also Daten wie in Excel präsentieren möchte, ist eine HTML-Tabelle genau das Richtige und wird diesem Zweck problemlos gerecht. Aber schon früh erkannten Webdesigner, dass Tabellen auch eine hervorragende Möglichkeit sind, das Seitenlayout und die Darstellung zu kontrollieren.
Ein Seitenlayout in mehrere Tabellenzellen aufzuteilen, kann per Hand etwas kniffelig sein. Außerdem können sich die unzähligen verschachtelten Tabellen eines Webseitenlayouts als wahrer Albtraum erweisen, wenn man die Seite verändern will. Hierbei greifen einem allerdings grafische Webdesign-Tools wie Frontpage unter die Arme. An einem Beispiel soll gezeigt werden, wie ein tabellenbasiertes Layout aussehen kann.
Das Beispiel in Listing A erzeugt eine Webseite mit Kopfzeile, Fußzeile, einem einfachen Menü sowie dem Bereich für die eigentlichen Inhalte. Eine Tabelle umgibt die gesamte Seite, die verschachtelte Tabellen für die einzelnen Seitenbereiche enthält: Kopfzeile, Fußzeile, Menü und Inhalt. Die Hintergrundfarbe für jeden Bereich wurde zu Demonstrationszwecken unterschiedlich eingestellt.
Listing A
Das Tabellendesign liefert zwar das gewünschte Ergebnis, aber der HTML-Quellcode kann etwas verwirrend sein. Ein positiver Aspekt beim Einsatz von Tabellen ist, dass die Darstellung in sehr vielen Browsern einheitlich ist, selbst in älteren Browsern wie dem Internet Explorer 5.0. Dies ist bei CSS-basierten Layouts nicht immer der Fall, aber dafür bietet CSS eine Reihe anderer Vorteile. Der Siegeszug der Webstandards begann vor einigen Jahren, als CSS langsam Form annahm. Ausgangspunkt war die Überlegung, dass HTML eigentlich für die Auszeichnung von Inhalten einer Webseite gedacht war, nicht aber für die Darstellung von Daten. CSS folgt diesem Designprinzip, indem man damit auf einfache Weise Layout (HTML) und Darstellung (CSS) trennen kann.
Anfangs wurde CSS vor allem zur Änderung der Textdarstellung verwendet (zum Beispiel Farbe oder Schriftart), aber im Laufe der Zeit kamen immer mehr Aspekte der Präsentation hinzu. Neben der vereinfachten Darstellung von Text oder Farben bietet CSS auch Layoutoptionen. Ein Problem mit CSS-basierten Layouts war bislang die mangelhafte Browserunterstützung. Inzwischen hat sich die Lage zwar etwas verbessert, aber ältere Browser werden auch weiterhin mit CSS nichts anfangen können. Für solche Fälle gibt es aber eine ganze Reihe von Workarounds und Hacks.
Daher soll das Beispiel von oben hier noch einmal mit CSS statt mit HTML-Tabellen umgesetzt werden. Der HTML-Code in Listing B erzeugt dieselbe Darstellung mithilfe von DIV-Tags zum Festlegen der Hauptbereiche der Seite (Kopfzeile, Menü, Inhalt und Fußzeile). Darüber hinaus verwendet das Menü eine ungeordnete Liste. Der CSS-Code ist im head-Bereich der HTML-Datei enthalten. Er legt Regeln für die Darstellung der einzelnen DIV-Tags fest, darunter Farben und Ränder.
Listing B
Unter dem Strich bietet das CSS-Layout ein Design, das leichter zu warten ist, da der Inhalt von HTML kontrolliert (und HTML ohne Tabellen viel einfacher zu lesen ist) und die Darstellung mithilfe von CSS festgelegt wird. Da die CSS-Unterstützung von Browser zu Browser leicht variieren kann, muss man gründlich testen und die vielen verfügbaren CSS-Hacks[1] einsetzen, um die bekannten Schwierigkeiten mit einzelnen Browsern zu umgehen. HTML-Tabellen und CSS sind nicht die einzige Möglichkeit, das Layout von Websites zu gestalten. So könnte man zum Beispiel auch mithilfe von Macromedia Flash eine dynamische Benutzeroberfläche gestalten. Allerdings sollte man hier immer eine Alternative in HTML/CSS für Benutzer bieten, deren Browser kein Flash unterstützt oder die für Flash-Seiten nicht viel übrig haben.
Die Mischung machts
Bei vielen aktuellen Projekten kommt ein gemischter Ansatz zum Tragen, bei dem sowohl HTML-Tabellen als auch CSS verwendet werden. Damit wird man auf einfache Weise den zahlreichen heute im Web benutzten Browsern gerecht. Ein reines CSS-Design bietet sich vor allem bei Anwendungen für Intranets an, für die ein einheitlicher Browser vorgegeben ist, was das Design erheblich erleichtert.
So wie es im Internet derzeit aussieht, dürfte ein gemischter Ansatz zu bevorzugen sein, bei dem CSS die meisten Präsentationsaspekte einer Seite kontrolliert (Schriftarten, Größen, Farben und so weiter), während Tabellen das Gesamtlayout unterstützen, besonders bei CSS-Layout-Features, die noch nicht allgemein unterstützt werden.
URLs in diesem Artikel:
[1] = http:/