CSS Tables, next big thing?
Dieser Artikel im Sitepoint-Blog über CSS Tabellen läßt mich ein wenig nachdenklich werden. Kurz zusammengefasst: ab der Version 8 wird der IE die sog. CSS Tabellen unterstützen. Das sind Konstruktionen, bei denen HTML-Elemente wie bspw. DIV als Tabellenzeilen und -zellen behandelt werden. Dies wird über ein Eigenschaft von display erreicht: display: table-cell, bspw.
CSS Tabellen gibt es schon lange, IE war der einzige Browser, der das nicht unterstützt hat, deswegen sind sie so selten anzutreffen. Tatsächlich jedoch sind sie natürlich ein hervorragendes Werkzeug um spaltige Layouts zu realisieren, denn so kompliziert der HTML-Code für Tabelle immer war (und der fällt ja weg), so einfach zu begreifen ist die visuelle Idee hinter einer Tabelle. Es bestehen gute Chancen, dass in ein bis fünf Jahren – je nachdem wie lange es braucht, bis sich IE8 ausreichend durchgesetzt hat – CSS Tabellen die komplizierten position- und/oder float-Konstruktionen der heutigen Zeit ersetzt haben werden.
Nachdenklich macht mich das ganze nun aus zwei drei Gründen:
- Die Reihenfolge des Contents in Code und Präsentation ist gleich. Es besteht keine Möglichkeit, den wichtigen Content zuerst zu liefern, Navigation etc. nach hinten zu stellen, diese Reiehenfolge in der Präsentation jedoch umzudrehen. SEO-Leute stehen da aber total drauf und bei Nutzern von Screenreadern ist das wohl auch sehr gewünscht.
- So einfach dieses Konstrukt für simple Layouts auch ist, aus den Zeiten des Tabellenlayouts weiss man, wie kompllziert das ganzen wird, wenn man beginnt Tabellen zu verschachteln. Dies wird aber nötig sein, um das umzusetzen, was sich Screendesigner ausdenken, wenn sie wieder beginnen in Tabellen zu denken.
- Ich halte Tabellen für ein böses Relikt aus schlimmen Tagen. Böse. Böse böse böse.
- Ich glaube Tabellenlayouts, ob nun in HTML oder CSS realisiert, sind total 90er. Ebenso kopieren die Gridlayouts, die man heute allenortens trifft, Paradigmen aus der Zeitungswelt, sind also ebenfalls total 90er (allerdings 1890er). Will sagen: ich bin mir nicht sicher, ob es nicht Layouts gibt, die besser ins Netz passen, und für die vielleicht keine Tabellen gebraucht werden. Aber das… ist nur so ein Gefühl. ;)
8 Kommentare
Torsten
05.03.2008, 12:54 Uhr
ein komplettes layout damit zu machen, kann ich mir nicht vorstellen. um nebeneinander stehende boxen contentabhängig auf eine gleiche höhe zu bringen, ist das aber sicher recht brauchbar. besser fake-col- oder js-lösungen.
Nico Brünjes
05.03.2008, 13:12 Uhr
Stimmt. Ich hatte jetzt von kompletten Layouts ge-albträumt… shiver…
Dirk
05.03.2008, 13:47 Uhr
Also, grundsätzlich erstmal gilt: Tabellen sind für tabellarische Daten da. Wenn man wirklich mal etwas layouttechnisch nebeneinander stellen muss, dann kann man das auch mit display: table-cell; machen, aber man sollte sich da wirklich schwer beherrschen. Und das Tabellendenken sollte wirklich langsam mal aufhören, leider habe ich hier immer noch Code, der sowas für Positionierung benutzt. Zum Glück sind das Altlasten, die mit der Zeit auch entsorgt werden.
Sönke
05.03.2008, 15:10 Uhr
Ich glaube, solange html nicht viel mehr Möglichkeiten liefert, als viereckige Kästen darzustellen, wird es auch immer Tabellenlayouts geben. Und leider steht das Zeitungslayout allzuoft Pate für Online-Designs. So wird sich noch vor IE8 und CSS3 mehrspaltig fließender Text im Netz verbreiten.
Für die SEOs und andere Screenreader ;) gibt es ja zum Glück ab html5 Elemente wie article, aside und nav.
Johannes
05.03.2008, 17:24 Uhr
Also mal ganz im Ernst. Ein CSS-Stil, der sich _optisch_ wie eine Tabellenzelle verhält, kann eine sinnvoll verwendete Tabelle nicht ersetzen. Hier sollte man zwischen (bösem) TabellenLAYOUT und normalen Tabellen unterscheiden, wie sie sinnvoll für, nun, eben tabellarische Daten eingesetzt werden.
Nur weil das table Konstrukt in den letzten 20 Jahren semantisch übelst falsch gebraucht wurde, heißt das jetzt nicht, dass man in Zukunft “echte” Tabellen als DIVs mit CSS-Stil ‘table-cell’ schreiben sollte. Sowas nennt sich DIV-Salat und ist auch eine (wenn auch nicht ganz so drastische) Form von schlechtem Code.
display: table-cell kann auch nicht die Funktionalität einer Tabellenzelle ersetzen -- was ist z.B. mit colspan, rowspan?
Meine Meinung, kurz gesagt: Wenn man table für das benutzt, wofür es gedacht ist, nämlich für Datentabellen, dann ist das gut so. Und für Layouts kann ich mir nicht vorstellen, dass display:table-cell eine Revolution ist, weil, wie im Text schon erwähnt, man die Reihenfolge der Darstellung nicht beeinflussen kann, was ein großes Manko gegenüber Float-Konstrukten ist.
Nico Brünjes
05.03.2008, 17:31 Uhr
Richtig. Tabellen sind Tabellen, sind Tabellen. Das setze ich hier immer voraus. Das wäre ja wirklich die Höhe, semantisch korrekte Tabellen durch CSS Tables zu ersetzen. Natürlich: auch dafür wird sich jemand finden. ;)
Mike
30.10.2008, 16:36 Uhr
Plädoyer FÜR Table-Layouts in gewissen Fällen:
Tabellendenken ist Grid-Denken -- also rein Layout-technisch geprochen. Und das ist erstmal nicht böse, oder? Zuerst war der Wunsch, etwas optisch anzuordnen. Und das muß bis heute irgendwie gelöst werden.
Eine reine HTML-Tabelle -- nur tr und td -- ist semantisch neutral und damit prinzipiell besser geeignet für Grids als verschachtelte oder ge-floatete divs. Bsp. Formulare. Besser weil stabiler, flexibler, leichtgewichtiger, zuverlässiger. Das tut niemandem weh, vor allem wenn die Felder und Labels dann desweiteren noch korrekt verdrahtet sind.
Komplexe CSS Layouts müssen auch erstmal gerendert werden, dazu dann ggf. noch irgendwelche JavaScript-Tricks… Eine einfache Tabelle steht sofort. Peng. Forumular-Layout perfect, kein Browser-ge-hacke nötig.
War das jetzt böse, böse??
Nico Brünjes
31.10.2008, 07:04 Uhr
Ja Mike, dafür wirst Du jetzt in der Hölle schmoren müssen. ;)
Aber mal im Ernst, so ganz bin ich da nicht bei Dir. Ich habe auch lange Zeit beim Layout von Formularen lieber Tabellen verwendet, aus den genannten Gründen. Inzwischen aber (ein paar Jahre später) beherrsche ich andere Techniken, die ebenso sicher sind und um einiges flexibler eben. Aber sei’s drum.
Ein komplettes Layout-Grid als Tabelle umzusetzen, halte ich für gefährlich, auch wenn es so tabellig aussieht. Nur ein paar <tr> und <td> tun niemanden weh, das mag schon sein, aber um unterschiedliche Spaltenanzahlen und -breiten innerhalb des Grids umzusetzen braucht man entweder pro Zeile 1 komplette Tabelle, oder verschachtelte Tabellen. Und spätestens da wirds wieder hakelig.