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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".