Tabellenlayouts 2.0: CSS-Tabellen fürs Webseitenlayout?

von Thomas H | 0 | 7554 Aufrufe

Anzeige Hier werben

Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Nein7Nein8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
display: table, table-cell, ...

Mit dem IE8 kann bald der letzte Browser mittels display: table, table-cell, table-row,... beliebige HTML-Elemente (also auch nicht-semantische Layoutelemente) als Tabellen darstellen. Damit würden Webdesignern wieder neue (alte) Layoutwerkzeuge in die Hand gegeben werden.

Kann und soll man bald wieder Tabellenlayouts benutzten?

Eine schwierige Frage, nachdem jahrelang gepredigt wurde, vom Tabellen-Layout die Finger zu lassen. Analysieren wir einmal, ob die Nachteile von "klassischen" Tabellen-Layouts auch noch auf die neue CSS-Technik noch zutreffen:

Nach- und Vorteile von CSS-Tabellen-Layouts

Barrierefreiheit

Hauptargument gegen Tabellenlayouts war die Barrierefreiheit, da der Inhalt Tabellen von Screenreadern immer als Tabellendaten interpretiert wird. Dieses Problem ist mit der CSS-Eigenschaft gelöst, da es sich für den Screenreader nun nur noch um normale Elemente handelt.

+/- 0 Punke für Tabellenlayouts.

Reihenfolge des Inhalts

Ein weiterer Vorteil von nichttabellenbasierten Layouts ist, dass der Inhalt in einer anderen Reihenfolge angezeigt werden kann als er im Quelltext steht. Im Quelltext kann man somit den wichtigsten Inhalt zuoberst hinschreiben, der dann auch als erstes lädt und zuerst von Screenreadern vorgelesen wird. Hier haben Tabellenlayouts Nachteile, da der Inhalt nicht unabhängig von der späteren Darstellung auf der Seite positioniert werden kann. Realität ist aber, dass die meisten Layouts derzeit durch floats gebaut sind und hier ist die Reihenfolge der Inhalts auch abhängig von der Darstellung.

Ein Minuspunkt für Tabellenlayouts.

Aufgeblähter Code

Tabellenlayouts benötigen durch ihre vielen Elemente (Tabelle, Tabellenzeile, Tabellenzeile) auch viele HTML-Elemente. Wenn man aber Tabellenlayouts sporadisch nur in ganz speziellen Fällen (z.B. für den äußersten Rahmen der Webseite einsetzt), und die immer schnelleren Internetverbindungen sowie die Tatsache, dass tabellenlose Layouts oft nur mit vielen Code-Intensiven Hacks auskommen berücksichtigt gibt es auch hier:

+/- 0 Punke für Tabellenlayouts.

Ich will hier noch hervorheben, dass ich keine 5-fach geschachtelten Tabellenlayouts befürworten will. Es geht nur darum den äußersten Rahmen einer Webseite mit einem Tabellenlayout möglichst einfach zu gestalten und nicht jede Liste oder sonstigen Unsinn. Das sind eine Handvoll Tags mehr, in manchen komplizierten Fällen sogar vielleicht ein paar weniger als bei einem herkömmlichen Layout! (Siehe Beispiel weiter unten)

Geräte mit kleinen Bildschirmen

Die Darstellung auf PDA, Handys und Geräten mit kleinen Bildschirmen hat in der Vergangenheit Probleme mit Tabellenlayouts mit sich gebracht. Dieses Problem hat sich fast von selbst behoben: Auf den meisten Handys sind heute Browser installiert, die Webseiten wir auf einem Desktop-Rechner darstellen und eine Zoom-Funktion mitbringen. Desweiteren ist es mit CSS problemlos möglich, genau für diese Geräte gesonderte Stylesheets anzubieten.

+/- 0 Punke für Tabellenlayouts.

Verständlichkeit

Tabellenlayouts sind für Webdesign-Anfänger viel einfacher zu verstehen als Layouts mittels float. Sie sind auch einfacher in WYSIWYG-Editoren zu bearbeiten.

+1 Punkte für Tabellenlayouts

Fehleranfälligkeit

Da floats nicht gerade unkompliziert sind kann es in manchen Browsern (vor allem dem IE6) zu Fehlern kommen. Tabellen sind für den Browser einfacher zu rendern.

+1 Punkte für Tabellenlayouts

Möglichkeiten

CSS-Tabellen erlauben es, gleich hohe Spalten zu verwenden. Es sind keine häßlichen Hacks a là Faux Columns nötig.

Float-Layouts
Absolute Positionierung
CSS-Tabellen
Footer
Ja
Ja
Ja
Gleich hohe Spalten
Nein
Nein
Ja
Footer ganz unten wenn Inhalt kleiner als Seite
Nein
Nein
Ja
weiteres... (Ideen?)

+1 Punkte für Tabellenlayouts

Flexible Layouts

Tabellen erlauben es, wie andere Layouts auch, Seiten an die Auflösung des Benutzer anzupassen. Dies kann oft sogar viel besser geschehen, da Zellenhöhen und -breiten auf die daneben befindlichen Spalten und den eigenen Inhalt flexibel regieren können. Mit max-width/max-height und min-width/min-height ergeben sich sogar noch viel mehr möglickeiten im Vergleich zu alten den alten Tabellenlayouts der 1990er Jahre.

+1 Punkte für Tabellenlayouts

SEO

Es wurde angemerkt, dass Tabellenlayouts schlecht für Suchmaschinenoptimierung sind. Dieses Argument zählt aber bei den neuen Layouts (bis auf die Reihenfolge des Inhalts, siehe oben) nicht, da sie für eine Suchmaschine von anderen Layouts nicht zu unterscheiden sind.

+/- 0 Punke für Tabellenlayouts.

Fazit

Das Tabellenlayout bekommt bei mir +2 Punkte!

Gegenüber float-Layouts haben Tabellenlayouts meiner Meinung nach viele Vorteile. Wenn man kein absolut positioniertes Layout benutzen kann, dann sollte man in Zukunft auf jeden Fall auf ein Tabellen-Layout setzen.

Vor allem die vielen Dinge, die man mit Float-Layouts nur mit komischen Hacks, wie z.B. Faux Columns hinbekommt sprechen für mich für ein viel einfacheres Tabellenlayout.

Anwendung der neuen Tabellen-Layouts heute

Leider hat sich der Internet Explorer 8 bisher noch nicht allzusehr verbreitet und ca. 55% aller User sind immer noch mit einer älteren Version des Microsoft-Browsers im Internet unterwegs.

Die Eigenschaft lässt sich aber schon heute benutzen, wie TJK-Design in seinem Layout ohne Floats und ohne absoluter Positionierung zeigt (Beispiel zum selbst überzeugen). Für den Internet Explorer 5-7 wird hier ein Hack mittel display: inline-block benutzt.

Diskussion

Ich würde mich freuen, wenn ihr mir zu den verschiedenen Argumenten eure Meinung sagt oder noch weitere Vor-/Nachteile hinzufügt. Korrigiert mich wenn ich irgendwo falsch liege.

Wie steht ihr zum Design mit Tabellen-Layouts?

Bisher gab es vor allem ablehnende Diskussionsbeiträge. Ich würde mich über nicht-dogmatische Diskussionen, mit Gedanken die weiter als "Tabellenlayouts sind einfach schlechter Stiel" hinausgehen, freuen.

Beispiel

Um die Angst vor aufgeblähten Tabellenlayouts zu verringern, hier einfach mal ein Codebeispiel wie ein solches Layout aussehen könnte:

HTML eines css-tabellenlayouts  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="header">Kopf</div>
  <div id="tb">
   <div>
    <div id="s1">Menü Links</div>
    <div id="s2">Inhalt</div>
    <div id="s3">Menü Rechts</div>
   </div>
  </div>
<div id="footer">Fußzeile</div>

<style type="text/css">
#tb {
    display: table;
    width: 100%;
}
#tb>div {
    display: table-row;
}
#tb>div>div {
    display: table-cell;
    width: 33.3%;
}
</style>
Über den Autor: Thomas H
arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
Profilseite betrachten