Die Vorzüge von HTML-Tabellen und CSS

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 einsetzen, um die bekannten Schwierigkeiten mit einzelnen Browsern zu umgehen.