Teil 5: Workshop: Komplexe Tabellen mit CSS gestalten
- Workshop: Komplexe Tabellen mit CSS gestalten
- Teil 2: Workshop: Komplexe Tabellen mit CSS gestalten
- Teil 3: Workshop: Komplexe Tabellen mit CSS gestalten
- Teil 4: Workshop: Komplexe Tabellen mit CSS gestalten
- 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 Zeil...
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.
