Tabellen standardkonform für Layouts nutzen

Teil 5: Workshop: Komplexe Tabellen mit CSS gestalten

Jedes Foto ist in seiner eigenen Layout-Zelle mit der zugehörigen Bildunterschrift enthalten. Alle Zellen aus einer Zeile sind in einem div-Element enthalten, dem die Klasse .row zugewiesen wurde.

Das übergeordnete Container-Element für alle Klassen hat die Klasse .album. Nur noch ein paar Zeilen CSS-Code und alle Elemente fügen sich den Vorgaben für eine Tabelle:

<style type="text/css"><!--
.album { display: table;
border-spacing: 4px; }
.row { display: table-row; }
.image { display: table-cell;
width: 240px;
background-color: #000;
border: 8px solid #000;
vertical-align: top;
text-align: center; }
.image p { color: #fff;
font-size: 85%;
text-align: left;
padding-top: 8px; }
--></style>

Automatische Vervollständigung

Eine interessante Besonderheit von Cascading Stylesheets im Zusammenhang mit tabellarischem Layout besteht in der automatischen Vervollständigung nicht explizit deklarierter Elemente des Layouts. Die CSS-2.1-Spezifikation sieht nämlich interessanterweise das Ergänzen fehlender Inhalte durch den Webbrowser vor.

Um ein dreispaltiges Layout zu erstellen, kann man den folgenden HTML-Code:

<div class="container"><div class="row"><div class="cell">Zelle 1</div><div class="cell">Zelle 2</div><div class="cell">Zelle 3</div></div></div>

zusammen mit diesem CSS-Code nutzen:

.container { display: table; }
.row { display: table-row; }
.cell { display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em; }

Genau dasselbe Resultat lässt sich erzielen, indem man denselben CSS-Schnipsel mit einer auf das Minimum reduzierten Version des HTML-Code einsetzt:

<div class="cell">CELL A</div><div class="cell">CELL B</div><div class="cell">CELL C</div>

Im letzteren der beiden Fälle muss der Browser die fehlenden Elemente, nämlich die Deklaration der Tabelle und der einzigen Tabellenzeile, als unbenannte Elemente eigenständig ergänzen.

Diese automatische Vervollständigung ersetzt jedoch nicht fehlendes Know-how. Sie folgt allerdings strikten Regeln, die man nicht ignorieren darf. Zum Beispiel in diesem Quelltext:

<div class="row">Zeile 1</div><div class="row">Zeile 2</div><div>Keine Zeile</div>

werden nur die ersten beiden div-Elemente untereinander angeordnet, als ob sie zur selben Spalte einer Tabelle gehörten.

Der Grund dafür ist leicht nachvollziehbar: Nur die ersten beiden div-Elemente erhielten mithilfe der Klasse .row die CSS-Eigenschaft display: table-row; zugewiesen. Das dritte Element ist nicht mit von der Partie.

Fazit

HTML-Tabellen für das Seitenlayout sind out - aus gutem Grund. Tabellen-Tags sollten nur zur Darstellung tabellarischer Inhalte eingesetzt und nur noch mittels CSS formatiert werden.

Cascading Style Sheets helfen aber nicht nur dabei, aus langweiligen tabellarischen Daten ansprechende und wartungsfreundliche Tabellen-Designs zu bauen. Cascading Stylesheets lassen sich auch zur Gestaltung eleganter tabellarischer Layouts einspannen, um die Einschränkungen von absoluter Positionierung und Float-Konstruktionen zu umgehen.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…