Semantisch korrektes Layout mit Tabellen…
24.11.08 - xHTMLCSS -
… Richtig gelesen. Mit den neuen CSS-Eigenschaften für display lassen sich Layouts nun mit CSS-Tabellen umsetzen. Welche Vorteile das bringt und wie man sie einsetzt, erklärt dieser Artikel.
Vor einigen Jahren wurder der Sprung vom Tabellenlayout zum tabellenlosen CSS-Layout vollzogen und hat sich bei den Entwicklern durchgesetzt. Mit der Einführung von CSS 3 wurde die Eigenschaft display um table, table-row und table-cell erweitert.
Diese Eigenschaften bewirken, dass sich ein HTML Element wie eine Tabelle verhält. Dadurch ergibt sich die Möglichkeit ein Layout zu gestalten ohne ein einziges Mal Floats zu verwenden. Ohne Floats gibt es auch keine Clearing-Fehler oder viele bekannte IE Bugs wie die verdoppelten Margins.
Layouts mit Tabellen? Ist das nicht falsch?
Gerade eben wurden Tabellen abgelöst und jetzt sollen wir damit wieder anfangen? Nein, denn Tabellen mit CSS geben nur einem Element die Eigenschaften einer Tabelle, die semantische Bedeutung bleibt aber erhalten.
3 Spalten-Standard-Layout
Mit CSS-Tabellen lässt sich kinderleicht ein 3 Spalten Layout mit Kopf- und Fußbereich aufsetzen ohne Floats zu verwenden.
Mit herkömlichen HTML-Tabellen sähe der Code wie folgt aus:
<table>
<tr>
<td>Navigation</td>
<td>Inhalt</td>
<td>Sidebar</td>
</tr>
</table>
Mit Hilfe von display:table und display:table-cell verhält sich eine Box wie eine Tabelle. Livebeispiel
Der Code sieht wie folgt aus:
<div id="container">
<div id="navi">
<h3>Navigation</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="content">
<h2>Überschrift</h2>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
</div>
</div>
CSS:
#container { display: table;border-collapse: collapse;}
/*Der Container dient nun als Tabelle */
#navi, #content, #sidebar { padding: 0 1em; display: table-cell;}
/*Die eingeschlossenen Divs verhalten sich nun wie Tabellenzellen*/
Die eingeschlossenen Divs verhalten sich nun wie Tabellenzellen. Das bringt eine Reihe von Vorteilen mit sich: Techniken wie Faux Columns werden unnötig, um einen Hintergrund „mit wachsen“ zu lassen, weil sich die Zellen an die Größte anpassen.
Rastersysteme lassen sich mit CSS-Tabellen auch vertikal besser kontrollieren. Folgendes war mit CSS nur sehr schwer zu erreichen, da die Boxen unabhängig von einander waren. Da sich die Boxen nun aber wie Tabellenzellen verhalten, gleichen sie ihre Größe, unabhängig vom Inhalt, an.
Unterstützung der Browser
Alle modernen Browser, außer der Internet Explorer unterstützen bereits die neuen CSS-Eigenschaften. Erst ab Version 8 soll der IE CSS-Tabellen unterstützen, was noch bis Oktober 09 dauern kann. Microsoft hatte vor einem Jahr im Oktober den IE 7 vorgestellt und wollte eigentlich jedes Jahr eine neue Version fertigstellen. Von diesem Ziel sind sie aber bereits wieder abgerückt.
Natürlich kann man die neue Technik bereits verwenden, da sie von allen anderen modernen Browsern unterstützt wird. Je nach Zielgruppe der Webseite kann das durchaus sinnvoll sein. Beispielsweise wenn die Mehrheit der Besucher einen aktuellen Browser verwendet. Für Benutzer des IE muss ein zweites Stylesheet, mit den üblichen Floats, eingebunden werden.
Die ersten großen Webseiten, die auf diese Technik umsteigen, wird es frühestens mit der kommenden Unterstützung des IE 8 geben.
