Schönes neues CSS: Die Rückkehr der Tabellen

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Mir ist erst kürzlich aufgefallen, dass wir uns dank des IE8 wirklich bald wieder mit dem Thema Tabellen in HTML und CSS befassen müssen, was spontan zu diesem Artikel aus der Reihe Schönes neues CSS geführt hat.

Ich dachte Tabellen sind böse?

Nicht unbedingt. Man sollte nur keine HTML-Tabellen (<table>, <td> etc.) für Layouts mißbrauchen – das widerspräche der Trennung von Inhalt und Design und bringt einen ganzen Haufen Probleme mit sich. Das ändert aber nichts daran, dass die meisten Layouts wie Tabellen aussehen.

Dieses Aussehen wird heutzutage in der Regel durch eine komplizierte Anhäufung von <div>-Elementen mit float und clear erreicht, was auch meist irgendwie funktioniert. Optimal ist das nicht immer. Da könnten dann in Zukunft CSS-Tabellen ins Spiel kommen. Denn damit kann man beliebigen HTML-Elementen mitteilen, sie mögen sich doch bitte wie eine Tabelle verhalten und aussehen. Oder wie eine Tabellenzelle oder beliebige andere Tabellenbestandteile. So baut man sich Dinge, die wie Tabellen aussehen, aber keine Tabellen sind.

Wie benutzt man CSS-Tabellen?

Eine kleine Demoseite zeigt, dass man alle Möglichkeiten der alten HTML-Tabellen hat. Mit den folgende Eigenschaften kann man einfach seine Tabelle zusammenbauen:

  • display:table; Element verhält sich wie eine normale Tabelle (<table>)
  • display:table-row; Element verhält sich wie eine Tabellenzeile (<tr>)
  • display:table-cell; Element verhält sich wie eine Tabellenzelle (<td>)

Angewendet sieht das Ganze dann zum Beispiel so aus:

<div class="table">
    <div>
        <div>Foo</div>
        <div>Bar</div>
    </div>
    <div>
        <div>Blub</div>
        <div>Asdf</div>
    </div>
</div>
.table {
    display:table;
}
.table div {
    display:table-row;
}
.table div div {
    display:table-cell;
    width:50%;
}

Wie in aufgemotzten Tabelle der Demo ebenfalls zu sehen ist, kann man auch bei der Gestaltung aus dem vollen Fundus der alten Tabellen schöpfen:

  • border-collapse steuert das Verhalten der Borders von Kind-Elementen mit display:table-cell;
  • border-spacing steuert den Abstand, den Kind-Elemente mit display:table-cell; zueinander haben. Nett ist hierbei, dass man horizontalen und vertikalen Abstand unterschiedlich festlegen kann, z.B. mit border-spacing:8px 32px;

Man kann sogar Elemente wie <tbody> wieder auferstehen lassen (in diesem Falle mit display:table-row-group), wobei ich selbst noch nicht ganz verstanden habe, wozu das gut sein soll … besondere optische Features hat das ja eigentlich nicht.

Festzuhalten ist: Mit CSS-Tabellen kann man HTML-Konstruktionen, die keine Tabellen sind wie Tabellen aussehen lassen, mit allem drum und dran.

Welche Browser verstehen diese CSS-Tabellen?

Von der Browser-Front gibt es gute Nachrichten. Alle von denen man es erwarten würde (Firefox, Opera, Safari), unterstützen CSS-Tabellen umfassend. Auch beim Internet Explorer sieht es nicht direkt schlimm aus, denn die Version 8 wird ebenfalls CSS-Tabellen schlucken bzw. die Beta-Version macht es bereits jetzt.

Die CSS-Tabellen sind ein nützliches Werkzeug. Wie nützlich, darüber kann man freilich debattieren – immerhin kann man nicht die optisch abgebildete Reihenfolge der Elemente beeinflussen, da die durch die Struktur des HTML vorgegeben ist. Mit float und position wäre das kein Problem. Aber wann immer etwas braucht, das wie eine Tabelle aussehen soll, aber keine Tabelle sein darf, könnten display:table; und seine Kollegen sicher ganz nützlich werden.

Kommentare (23)

  1. Markus

    23. Oktober 2008, 11:14 Uhr

    So schön der Ansatz auch ist - solange der IE 6 und IE 7 die Browser der Allgemeinheit sind kann man eine solch schöne CSS Lösung doch eigentlich vergessen.

    Man müsste jetzt wieder einen Hack für den IE machen um die gleiche <div> Struktur auch im IE als Tabelle verwenden zu können.

    Also bleibt man doch bei der für alle Browser verständlichen flaot Lösung, schreibt weiterhin seine Workarounds für die verschiedenen Browser und wartet darauf, dass der IE 8 seine Vorgänder abgelöst hat..

  2. John

    23. Oktober 2008, 11:38 Uhr

    Jau, bin gestern auch über diesen Artikel gestolpert. »Everything You Know About CSS Is Wrong« ist schon ein großes Wort gelassen ausgesprochen.

    Ich sehe das Ganze momentan skeptisch. Vom Markup her wären es zwar keine Tabellen, aber dafür gibt es dann DIV-Wüsten mit denen das uralte Tabellen-Design nachgebaut wird. Hauptsache semantisch korrekt ist.

    Man sollte lieber aus der Box ausbrechen, statt sich vom Regen in die Traufe zu begeben.

  3. Peter

    23. Oktober 2008, 11:39 Uhr

    Zitat Markus:

    So schön der Ansatz auch ist - solange der IE 6 und IE 7 die Browser der Allgemeinheit sind kann man eine solch schöne CSS Lösung doch eigentlich vergessen.

    Ach, das ist halb so wild. Genau dafür wäre doch Eric Meyers Lösung prädestiniert. Einfach im IE per JS alle Pseudo-Tabellen durch echte Tabellen ersetzen und fertig.

  4. John

    23. Oktober 2008, 11:59 Uhr

    Zitat Peter:

    Zitat Markus:

    Ach, das ist halb so wild. Genau dafür wäre doch Eric Meyers Lösung prädestiniert. Einfach im IE per JS alle Pseudo-Tabellen durch echte Tabellen ersetzen und fertig.

    Auch wenns »nur« für den IE ist: Mit JS das Markup aufbauen ist evil. Da reicht es schon, wenn die Unwissenden (IE-Nutzer) die Sicherheitsstufe auf hoch setzen und voilá haben sie einen leeren Screen. Ohne Fallback ist das Käse.

    Nee, nee... CSS-Tabellen kommen so schnell ohnehin nicht.

    Zumal es noch andere Schwierigkeiten gibt, Positionierungsprobleme z.B.

    Außerdem bin ich mir nicht sicher, ob es - wenn dann CSS 3 vollständig einsetzbar ist - überhaupt noch notwendig ist, über die Hintertür wieder Tabellendesign einzuführen.

  5. Peter

    23. Oktober 2008, 12:07 Uhr

    Zitat John:

    Auch wenns »nur« für den IE ist: Mit JS das Markup aufbauen ist evil. Da reicht es schon, wenn die Unwissenden (IE-Nutzer) die Sicherheitsstufe auf hoch setzen und voilá haben sie einen leeren Screen. Ohne Fallback ist das Käse.

    Also ich denke nicht, dass irgendwer schlau genug für den Javascript-Trick ist, aber gleichzeitig zu dämlich, um zu schauen, ob die Seite auch ohne JS halbwegs bedienbar ist. Das schließt sich doch aus.

    Außerdem bin ich mir nicht sicher, ob es - wenn dann CSS 3 vollständig einsetzbar ist - überhaupt noch notwendig ist, über die Hintertür wieder Tabellendesign einzuführen.

    Dazu muss es ja nicht kommen. Aber manchmal gibt es eben Dinge, die wie Tabellen aussehen sollen, ohne welche zu sein, genau wie man manchmal Inline-Elemente hat, denen man ein display:block; verpassen will.

  6. John

    23. Oktober 2008, 12:15 Uhr

    Zitat Peter:

    Zitat John:

    Also ich denke nicht, dass irgendwer schlau genug für den Javascript-Trick ist, aber gleichzeitig zu dämlich, um zu schauen, ob die Seite auch ohne JS halbwegs bedienbar ist. Das schließt sich doch aus.

    Wenn es mal ein paar Kleinigkeiten sind für die CSS-Tabellen zum Einsatz kommen, kein Thema. Die Artikel, die momentan rumgeistern, empfehlen aber diese Variante als generelle Lösung für das Layout einer Seite. Und da sieht es dann mit einer Alternative für Non-JS-Surfer schlecht aus. Oder zumindest hätte man noch wesentlich mehr Aufwand für verschiedene Stylings, als die IEs jetzt schon verursachen.

  7. Peter Linzenkirchner

    23. Oktober 2008, 12:59 Uhr

    Ist das wirklich eine echte Lösung?

    Warum sind echte Tabellen eigentlich "böse"? Weil sie nicht semantisch sind bzw. weil sie von Screenreadern nicht in der richtigen Lesereihenfolge gelesen werden können, insbesondere dann, wenn sie ineinandergeschachtelt werden.

    Und wie ist das bei obigem CSS-Tabellen-Beispiel? Leider genauso so. Der Textfluss läuft wie in einer Tabelle: Foo Bar Blub Asdf und nicht wie wahrscheinlich erforderlich: Foo Blub Bar Asdf. Man kann sich sehr schön ausmalen, wie geschachtelte CSS-Tabellen aussehen und wie diese von Screenreadern vorgelesen werden.

    Tabellen sind für Layoutzwecke doch nicht deshalb verboten weil sie uncool sind oder weil es so schön schwer ist, mit floatenden Boxen zu arbeiten und sich die modernen Webdesignern damit beeindruckend von den alten WYSIWYG-Schraubern absetzen können. Hinter diesem Verbot steht ein Sinn - auf den kommt es an und nicht auf ein mechanisches Einhalten von Vorgaben.

    Mein Fazit: CSS-Tabellen sind genauso wenig semantisch wie echte Tabellen.

  8. John

    23. Oktober 2008, 13:28 Uhr

    Zitat Peter Linzenkirchner:

    Ist das wirklich eine echte Lösung?

    Und wie ist das bei obigem CSS-Tabellen-Beispiel? Leider genauso so. Der Textfluss läuft wie in einer Tabelle: Foo Bar Blub Asdf und nicht wie wahrscheinlich erforderlich: Foo Blub Bar Asdf. Man kann sich sehr schön ausmalen, wie geschachtelte CSS-Tabellen aussehen und wie diese von Screenreadern vorgelesen werden.

    Ich hab mit Screenreadern keine praktische Erfahrung, wird die CSS-Formatierung tatsächlich in die Interpretation des Markups einbezogen? Ich hätte gedacht, dass nur der unformatierte Inhalt der HTML-Seite »gelesen« wird.

  9. Peter

    23. Oktober 2008, 13:30 Uhr

    Zitat Peter Linzenkirchner:

    Mein Fazit: CSS-Tabellen sind genauso wenig semantisch wie echte Tabellen.

    Wenn man nur einen Haufen Divs verschachtelt, dürfte das sicher zutreffen. Aber das muss man ja nicht. Man kann man auch anderen HTML-Elementen in solche Tabellen einbauen, Überschriften zum Beispiel. Ob die Leserichtung dann ein Problem ist, dürfte von Fall zu Fall unterschiedlich sein. Und die CSS-Tabellen bieten auf jeden Fall bessere Trennung von Inhalt und Design.

  10. soophie

    23. Oktober 2008, 20:52 Uhr

    also mir fallen auf anhieb mehrere beispiele für die sinnvolle verwendung ein: teaserseiten die aus einem CMS gepflegt werden und wo mehrere Teaser horizontal anezeigt werden. dort wären alle teaser gleich hoch und breit. allgemein für grid-layout ist das sicher geeignet wenn nebeneinanderliegende boxen verschiedene höhen haben. das sieht mitunter echt bescheuert auss.

    btw. screensreader interpretieren manchen css-code, z.b. display:none

  11. Christoph

    23. Oktober 2008, 22:10 Uhr

    @soophie
    Um gleiche Höhen von Elementen zu erzeugen, brauch ich doch keine Layout-Tabellen(egal ob HTML oder CSS), oder versteh ich hier was falsch?

    Ich wüsste jetzt nicht, wo eine per CSS erzeugte Tabelle Sinn macht. Vielleicht hat mal jemand ein konkretes Beispiel?

  12. soophie

    23. Oktober 2008, 22:20 Uhr

    ein konkretes beispiel? ich habe den präsenzfall für dich: vertikale navigation mit hintergrundfarbe sagen wir gelb. daneben den content mit hintergrundfarbe äh grün (hübsch ich weiß^^) diese sollen immeer gleich lang sein, so dass sie unten bündig abschließen. derzeit regle ich das so: übergeordnete eben erhält nen hintergrundbild gelb für die navigation. mit der tabellendarstellung wäre der container nav immer so hoch wie der content-container. z.b. wie hier: http://www.interboden.de/

  13. Anne-Kathrin

    24. Oktober 2008, 05:02 Uhr

    Ich habe noch nie mit Tabellen gelayoutet, aber auch (ich weiß, wir sind beim DIV!) noch nie in Tabellen gedacht.

    Ein typisches Layout ist, -übersetzt in die Tabellendenke- eher eine verschachtelte "Tabelle" oder eine mit col- und rowspans.
    Soll heißen: ein typisches Layout hat in den seltensten Fällen eine typische Tabellenoptik mit gleicher Anzahl von Zeilen und Spalten.
    Vielleicht sind einzelne Layoutelemente ähnlich einer Tabelle.
    Ich seh die Anwendung nicht ganz. Es gibt nichts, was nicht mit DIVs in den Griff zu bekommen wäre und es gibt kaum etwas an Layout, das ich gelungen auf die Tabellenwelt übertragen könnte.

    Meyer beispielsweise bringt die display: table-x Elemente in seinem Buch vorwiegend (und richtigerweise) im Kontext XML.

  14. Christoph

    24. Oktober 2008, 05:10 Uhr

    Ah ok, das meinst du.
    CSS-technisch wäre das dann etwas einfacher als derzeitige Float-Lösungen. Allerdings würde das erkauft durch mehr unnötiges Markup, was auch nicht grade einer semantischen Verwendung entspricht.

    Ich weiß nicht, dieser Ansatz mit den CSS-Tabellen riecht mir zu sehr nach einer Hintertür für Layouttabellen, und dementsprechend entstehen ähnliche Probleme, zumindest was die Ausrichtung des Quellcodes nach dem Aussehen statt nach dem Inhalt angeht.

    Mal sehen, vielleicht gelingt es dennoch, die CSS-Tabellen-Eigenschaften für sinnvolle Ergänzungen oder Vereinfachungen der gängige Float-Lösungen einzusetzen.

  15. soophie

    24. Oktober 2008, 08:15 Uhr

    zu Anne-Kathrin: Natürlich ist alles auch ohne sowas umsetzbar. Aber ich finde es einfach unüberschaubar den Hintergrund einer Navigation im übergeordneten Element zu definieren, nur damit die Navigation genauso lang optisch wird wie der Content. Es geht bei der Umsetzung auch sicher nicht um ein komplettes Layout sondern eher um Teilbereiche. Sei es der Rahmen bei dreispaltigen Layouts wie hier: http://www.digital-web.com/extras/css_wrong/1.png oder ein Teilbereich wie eine Liste oder Gallery http://www.digital-web.com/extras/css_wrong/3.png
    Elemente die auf einer Ebene liegen werden nun auch gleich hoch, das geht ohne Trickserei so bis dato nicht.

    zu Christoph: Wieso das Markup hast du doch bereits? Wenn ich mir überlege, wie runde Ecken zusammengeschustert werden, kann ich ein zusätzliches div verschmerzen. wenn es überhaupt nötig ist.

    (bilder von: http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/)

  16. GE

    6. November 2008, 11:30 Uhr

    Unfassbar! Nachdem das eigentlich sinnvolle Boxmodell des IE nach jahrelangen Machtkämpfen zwischen MS und W3C (Es kann ja nicht sein, dass ein Marktführer wie Microsoft die Standards setzt) endlich auf breiter Front ausgemerzt wurde, soll nun mit CSS3 genau dieses Boxmodell alternativ wiederbelebt werden (border-box).

    Nachdem Tabellen zu Layoutzwecken nach jahrelangen ideologischen Grabenkämpfen endlich verteufelt sind, versucht man, Verhalten und Aussehen einer Tabelle per CSS nachzubauen.

    Mein Gott, wenn sich Elemente wie eine Tabelle verhalten und auch so aussehen sollen, dann nehme ich eben eine Tabelle. Das Internet wird daran nicht sterben.

    Der vielzitierte usability-Guru Jakob Nielsen scheint das genauso zu sehen:

    useit.com

    Einfach mal die Quelltexte anschauen.

  17. FuNKeR

    5. Dezember 2008, 10:59 Uhr

    Hui, interessantes Thema. Das werde ich mal im Auge behalten. Ich hab immer wieder Probleme mit CSS, meine Layouts zu gestalten. Ich hänge immer wieder stundenlang davor, wie ich ein Element nach links oder rechts neben den Rest bekomme. Das ist mit den alten Tabellen doch wesentlich übersichtlicher, auch wenn der Quellcode dazu Mist ist.

    Werd mich damit mal auseinandersetzen.

    PS: Direkt mal deinen Feed abonnieren. Mal wieder eine Perle in meinem Reader :)

  18. David

    25. Mai 2009, 21:16 Uhr

    Ich bin gerade über den Artikel gestolpert. Eine Lösung für die Internet Explorer 6 und 7 findet sich im Buch "Fortgeschrittene CSS Techniken" von Ingo und Corina. Im IE lässt sich das Verhalten durch

    display:inline;
    zoom:1;

    für die Tabellenelemente simulieren.

  19. Robert Agthe

    26. Mai 2009, 19:37 Uhr

    Ich werde sicherlich nicht CSS Tabellen für Layouts benutzen. Finde Sie aber aus einem andern Grund nützlich. Man kann bei Tabellen auf die unsemantischeren <td><tr> verzichten und im quelltext sowas schreiben:
    <ul id="name">
    <li>
    <p>Erste Spalte</p>
    <p>Zweite Spalte</p>
    <a href="bla.htm">Weiter</a>
    </li>
    <li>
    <p>Erste Spalte</p>
    <p>Zweite Spalte</p>
    <a href="bla.htm">Weiter</a>
    </li>
    </ul>

    Und das ganze mit CSS Display entsprechend darstellen. Auch könnte man aus sowas ne Tabelle machen:


    <div>
    <h3>Spalte 1</h3>
    <p>Spalte 1 Text</p>
    <p>Spalte 1 Reihe 2</p>
    </div>

    <div>
    <h3>Spalte 2</h3>
    <p>Spalte 2 Text</p>
    <p>Spalte 2 Reihe 2</p>
    </div>

    Weil wir grad bei der display Eigenschaft sind:
    <ul>
    <a href="navi1.html">Navi Link 1</a>
    <a href="navi2.html">Navi Link 2</a>
    </ul>

    mit

    ul a {
    display: list-item;
    }

    formatiert, find ich auch saumässig lässig und code sparend. Ist halt alles ne Frage wie mans einsetzt :D

  20. adrian_broher

    27. Mai 2009, 12:35 Uhr

    Zitat Robert Agthe:

    Man kann bei Tabellen auf die unsemantischeren <td><tr> verzichten und im quelltext sowas schreiben

    Bei Tabellen ueber unsemantische <td><tr> reden, alles klar Commander. o\

    Zitat Robert Agthe:

    Weil wir grad bei der display Eigenschaft sind:
    <ul>
    <a href="navi1.html">Navi Link 1</a>
    <a href="navi2.html">Navi Link 2</a>
    </ul>

    mit

    ul a {
    display: list-item;
    }

    formatiert, find ich auch saumässig lässig und code sparend. Ist halt alles ne Frage wie mans einsetzt :D

    Wie waer es, wenn du es erstmal richtig einsetzt?

    http://www.w3.org/TR/REC-html40/sgml/dtd.html

    <!ELEMENT UL - - (LI)+ -- unordered list -->

    btw: Peter, deine Vorschau frisst das plus auf.

  21. Sebastian

    26. November 2009, 09:17 Uhr

    Mal ne Antwort auf die Frage, was der tbody soll:
    Wenn ich mich recht entsinne kann ich den Kopf, also die Überschriften der Spalten und die Daten, sprich den body, voneinander trennen. Wenn ich nun die Seite drucken möchte, und die Tabelle auf zwei Seiten aufgeteilt wird, dann wiederholt der Browser auf der zweiten Seite den head, also die Überschriften.
    Find ich ein cooles feature. So: Markup is everything!

  22. Marcus

    22. September 2012, 22:36 Uhr

    Das Problem bei dieser Methode ist, dass man kein padding auf einzelne ""Zellen" anwenden kann - sondern maximal nur border-spacing, welches dann alle Zellen betrifft.

    Somit ist dieses Modell nur bedingt anzuwenden

  23. Peter Kröner

    22. September 2012, 23:01 Uhr

    Kann man nicht? Wieso? Einfach ein Div nehmen und dem padding geben sollte doch fluppen.

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon