CSS vs. Tabellen

Als ich vor rund zehn Jahren anfing, mich erstmals mit HTML auseinanderzusetzen, sah die Welt des Webdesigns noch völlig anders aus. Und eigentlich meine ich nicht das Aussehen, sondern vielmehr den zumeist unsichtbaren Aufbau dahinter, denn CSS steckte noch in den Windeln und wer etwas auf sich hielt, nutzte sogenannte blinde Tabellen, um komplexere und mehrspaltige Layouts umzusetzen. Damals war der Internet Explorer noch der beliebtere Browser, während Netscape 4 mit Darstellungsproblemen zu kämpfen hatte, insbesondere was Tabellen mit Hintergrundbildern betraf.

Doch das änderte sich mit der Zeit. CSS wurde wichtiger und ersetzte erst nur einige font-Tags und avancierte immer mehr zum Spiel- und Werkzeug der Webdesigner; mit der Zeit wurden Tabellenlayouts verdrängt. Heute sind sie zumeist sogar verpöhnt, weil (X)HTML als semantische Auszeichnungssprache auch semantisch korrekt benutzt werden will. So oder ähnlich wird zumindest argumentiert. Doch nicht zuletzt ist es nun der Internet Explorer, der vielen Entwicklern beim Umsetzen von CSS-Layouts Kopfschmerzen bereitet – insbesondere dann, wenn man erstmalig damit konfrontiert wird. Wären Tabellen nicht einfacher?

Heutzutage findet man im Internet unzählige Tutorials, die einem den Umgang und verschiedene Tricks mit CSS erklären. Von Tabellenlayouts hört und sieht man nichts. Ein Hinweis dafür, dass CSS viel zu kompliziert ist und Erklärung benötigt? So sieht es jedenfalls Ron Garett, der erklärt, wieso seiner Meinung nach CSS nicht für Layout benutzt werden sollte. Seine Gründe: Mit CSS kann man Elemente nur relativ zu ihren Containern positionieren, nicht zu (beliebigen) anderen Elementen und HTML-Code und Stylesheet sind nicht untrennbar und immer in irgendeiner Art und Weise voneinander abhängig.

Damit mag er zum Teil auch Recht haben. Wenn man etwas kompliziertere Layouts umsetzen will, wird man hin und wieder nicht drumrum kommen, Wrapper-Elemente oder semantisch bedeutungslose Konstrukte einzubauen. Und will man (achtung, absurdes Beispiel) den Titel der Webseite plötzlich nicht mehr im Header, sondern unter dem Footer anzeigen, so wird man, solang man keine abenteuerlichen Sachen mit absoluter Positionierung anstellt, die HTML-Struktur wohl ändern müssen. Von einer 100%igen Trennung von Inhalt und Gestaltung kann also keine Rede sein. Aber ist das auch ein Argument für Tabellen? Wohl kaum, denn die Abhängigkeit, die ja unerwünscht ist, ist in dem Fall ja noch viel stärker ausgeprägt. Mal eben die Anordnung von Zeilen oder Zellen zu ändern, ist ohne Tricksereien mit CSS nicht möglich, stellt also auch keinen Vorteil dar.

Weiterhin versucht Ron, seine Argumente mit einem Beispiel zu verdeutlichen. Er baut ein einfaches Drei-Spalten-Layout auf und erklärt, dass der Inhaltsbereich, der in der Mitte zu sehen ist, auch im HTML-Code zwischen linker und rechter Spalte auftauchen sollte. Also tauscht er einfach zwei Spalten und siehe da, das CSS-Layout wird zerschossen. Aber was ist das denn für eine Begründung? Mit CSS ist es möglich, die Spalten in einer beliebigen Reihenfolge im Code anzuordnen, um die Inhalte so für Screenreader (blinder Menschen) oder Suchmaschinen zugänglicher zu machen, während man sich mit Tabellen doch viel mehr festlegt. Mal ganz abgesehen davon, dass Screenreader bei einer Tabelle auch tabellarische Daten erwarten und entsprechend die Barrierefreiheit in Frage gestellt wird.

Weitere Unzulänglichkeiten sieht er darin, dass sich benachbarte Elemente nicht gleichmäßig in der Höhe ausdehnen und sie allgemein zu unflexibel sind. Letzteres lässt sich mit gescheitem CSS durchaus bekämpfen, während das Argument der gleichen Höhen aber nicht ganz aus der Luft gegriffen ist, denn dafür gibt es viele teils unzulängliche oder seltsame Lösungen. Doch das allein überzeugt mich nicht.

Letztlich komme ich zu dem Schluss, dass man ein grundsätzliches oder tiefergehendes Verständnis von CSS braucht, um die Nachteile auszugleichen. Hat man mal etwas Routine und kennt die Probleme, so ist es einfacher, semantisch brauchbares HTML zu schreiben und gleichzeitig ein ansprechendes Design umzusetzen, während man mit Tabellen dann wiederum auf andere Probleme stieße. Aber genau da liegt der Punkt: Man muss sich erstmal eingehend damit auseinandersetzen. CSS mag am Anfang einfach erscheinen, aber gerade wenn es ums Layout geht, ist es alles andere als das. Tabellen sind viel einfacher zu begreifen, da jeder Tabellen kennt und weiß, wie er sie sich vorzustellen hat. Und letztlich geht es bei der Diskussion CSS vs. Tabellen genau darum – die (nicht vorhandene) Simplizität. Und mal ehrlich: Welchen Nutzer interessiert, ob eine Seite aus Tabellen aufgebaut ist oder nicht, hauptsache sie funktioniert und sieht passend aus? Ich kann durchaus nachvollziehen, dass manch einer die einfache Variante vorzieht.

Ich kann mir inzwischen ein Layout ohne CSS kaum noch vorstellen. Oder gut, vorstellen schon, aber machen? Nein danke, dafür habe ich schon genug hässliche bis ins unkenntliche verschachtelte Beispiele gesehen. Ich werde auch weiterhin mit CSS arbeiten und wenn ich mal auf ein Problem stoße, dann finde ich ganz sicher ein kleines Tutorial oder dergleichen, das mir bei der Lösung hilft. Außerdem mag ich semantischen Code, da ich so eher das Gefühl habe, unabhängig von der Darstellung zu sein und das hilft letztlich z.B. auch bei der Suchmaschinenoptimierung. Für mich gewinnt also CSS diesen „Kampf“.

Tags:

2 Antworten

  1. Ben says:

    Hi,
    Bin absolut deiner Meinung. Ich habe nichts gegen Tabellen, solange sie für tabellarische Daten genutzt werden und nicht zum Layouten. Weiterhin wären wir Tabellen viel zu unübersichtlich – ich habe mich an die übersichtlichen divs und spans total gewöhnt. Die Einfachheit für Einsteiger halte ich auch nicht für ein gutes Argument – entweder man macht’s richtig, oder lässt es gleich sein.
    http://www.webmasterpro.de/coding/article/tabellen-vs-css-layout.html Das ist ein Artikel auf Webmasterpro, der vor einiger Zeit zu dem Thema geschrieben wurde. Die Vorteile von Tabellen, die dort genannt werden, finde ich nicht wirklich überzeugend.

  2. ex-ratt says:

    Eric Meyer hat sich letztens auch kurz zum Thema Tabellen geäußert und dabei auch CSS-Tabellen angesprochen, bei denen man Tabelleneigenschaften per CSS zu „normalen“ Elementen zuweist – eine Technik, die in den letzten Monaten von manchem als neues Wundermittel angepriesen wurde, da man Tabelleneigenschaften bekommt, ohne nicht-semantischen HTML-Code zu schreiben. Aber letztlich büßt man auch da ein bisschen Flexibilität ein, abgesehen davon, dass man für den IE6 dann auch wieder eine Extrawurst machen muss…