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.

Die anderen Teile der Serie:

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.