Teil 4: 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
Jetzt kommt das CSS ins Spiel und die einzelnen Layout-Elemente fügen sich den Regeln, die für eine Tabelle vorgesehen sind:...
Jetzt kommt das CSS ins Spiel und die einzelnen Layout-Elemente fügen sich den Regeln, die für eine Tabelle vorgesehen sind:
#main { display: table;
border-collapse: collapse; }
#nav { display: table-cell;
width: 180px;
background-color: #69C; }
#extras { display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #69C; }
#content { display: table-cell;
width: 380px;
padding-left: 10px;
border-right: 1px dotted #69C; }Das resultierende tabellarische CSS-Layout wird sowohl in Firefox, Chrome, Opera und Safari als auch in Internet Explorer 8 korrekt dargestellt.
Das Geheimnis liegt in der Eigenschaft display. Sie kann Tabellen-spezifische Werte einnehmen, damit sich die betreffenden Elemente den gestalterischen Regeln fügen, die eigentlich für eine Tabelle vorgesehen sind. Zum Beispiel:
• table verleiht dem betreffenden Element den Charakter eines Tabellen-Elementes. • table-row bringt dem betreffenden Element das Verhalten einer Tabellenzeile (tr) bei. • table-cell führt dazu, dass sich das betreffende Element wie eine Zelle (td) benimmt. • table-row-group verleiht dem Objekt das Verhalten einer Gruppe von Tabellen-Zeilen (tbody). • table-header-group erzwingt das Verhalten, das man von einer Gruppe von Header-Zeilen (thead) erwartet. Analog dazu erzwingt table-footer-group das Verhalten einer Gruppe von Fußzeilen (tfoot). • table-caption bringt dem betreffenden Element das Verhalten einer Tabellenüberschrift bei. • table-column verleiht dem betreffenden Element das Verhalten einer Tabellenspalte (col). • table-column-group zeichnet für das Verhalten verantwortlich, das man von einer Gruppe von Spalten (colgroup) erwartet.
Es gibt auch noch andere Tabellen-bezogene CSS-Eigenschaften, mit deren Hilfe man das Layout der Webseite beeinflussen kann. Setzt man beispielsweise die Eigenschaft table-layout auf den Wert fixed, werden die einzelnen Spalten mit identischer Breite dargestellt.
Tabellenränder zwischen den einzelnen Layout-Zellen lassen sich mit der Eigenschaft border-collapse steuern. Wird dieser Eigenschaft der Wert collapse zugewiesen, werden die betreffenden Abstände eliminiert.
Erhält die Eigenschaft border-collapse den Wert separate, bleiben Abstände zwischen den Zellen gewahrt und können zusätzlich mithilfe der Eigenschaft border-spacing beeinflusst werden. Tabellarische CSS-Layouts eignen sich hervorragend zum Beispiel für den Einsatz als Bildergalerien.
Der benötigte HTML-Quelltext für ein Fotoalbum mit Bildunterschriften könnte zum Beispiel wie folgt aussehen:
<body><div class="album"><div class="row"><div class="image"><img src="Bilder/Bild1.jpg" alt=
"Bild 1"><p>Text Nr. 1 </p></div><div class="image"><img src="Bilder/Bild3.jpg" alt=
"Bild 3"><p>Text Nr. 2 </p></div></div><div class="row"><div class="image"><img src="Bilder/Bild2.jpg" alt=
"Bild 2"><p>Text Nr. 3 </p></div><div class="image"><img src="Bilder/Bild4.jpg" alt=
"Bild 4"><p>Text Nr. 4 </p></div></div></div></body>
