Cascading Style Sheets helfen, aus langweiligen Tabellen ansprechende Elemente für die Website zu bauen. Dieser Artikel erklärt die Grundlagen und den Umgang mit CSS und Tabellen - zum Beispiel Ausrichtung, Abstände und Füllungen.
In diesem letzten Teil einer dreiteiligen Artikelreihe wird erläutert, wie Tabellen mit CSS individuell gestaltet werden können. Beim ersten Teil ging es um das korrekte und barrierefreie Aufbauen von Tabellen[1]. Der zweite Artikel beschäftigte sich mit der Gestaltung der Rahmen[2] von Tabellen.
Wer mit CSS- und HTML-Elementen arbeitet, ist gut beraten, sich immer das Box-Modell vor Augen zu halten. Es bedeutet, dass für alle Elemente im Dokumentbaum in CSS rechteckige Kästen erzeugt werden. Jeder Kasten besitzt einen Inhaltsbereich sowie optional um diesen herum angeordnete Auffüllungen, Rahmen und Außenbegrenzungen.
Abstände
Auffüllbereiche und Außenbegrenzungen sind in HTML-Tabellen ganz leicht zu definieren, indem diese in den CSS-Regeln festlegt werden. Hauptproblem ist dabei der Umstand, dass die Außenbegrenzung nur für die Gesamttabelle und nicht für einzelne Zeilen, Spalten oder Zellen gilt.
Der HTML-Code in Listing A stellt eine Tabelle mit über CSS definierten Begrenzungen und Zellabständen dar. Die Eigenschaften von Auffüllbereich und Außenbegrenzung können dabei nach Belieben definiert werden (left, right, top und bottom), ebenso wie die Syntax im vorangehenden Beispiel, die eine Begrenzung für alle Seiten des Elements definiert.
Listing A
Listing B definiert separate Werte. Außerdem wird die Eigenschaft der Breite für die gesamte Tabelle angewandt. Auf diese Weise wird ganz einfach die Größe der Tabelle definiert.
Listing B
TD, TH { text-align: center; vertical-align: middle;}
Die Eigenschaft vertical-align besitzt die folgenden möglichen Werte: baseline, sub, super, top, text-top, middle, bottom, text-bottom und length. Wird ein prozentualer Wert angeben, so verwendet der Browser einen entsprechenden Anteil der Zeilenhöhe. Die Eigenschaft text-align ist mit den möglichen Werten left, right, center und justify einfacher aufgebaut. Wie bei allen HTML-Elementen wird über die CSS-Eigenschaft display überprüft, ob ein Element auf der Webseite sichtbar ist. Die folgenden, auf eine HTML-Tabelle bezogenen Anzeigewerte sind gültig:
- table: Dies entspricht einem HTML-TABLE-Element auf Block-Level.
- inline-table: ein HTML-TABLE-Element auf Inline-Level.
- table-row: eine aus Zellen bestehende Zeile in einer Tabelle (TR-Element).
- table-row-group: eine Gruppe aus einer oder mehreren Tabellenzeilen (TBODY-Element).
- table-header-group: eine Gruppe aus Zeilen, die über den Tabellenzeilen und nach ihrem Titel angezeigt wird (THEAD-Element).
- table-footer-group: eine Gruppe aus Zeilen, die hinter allen anderen Zeilen oder Zeilengruppen angezeigt wird (TFOOT-Element).
- table-column: eine aus Zellen bestehende Spalte in der Tabelle (COL-Element).
- table-column-group: eine Gruppe aus Spalten in einer Tabelle (COLGROUP-Element).
- table-cell: Dies entspricht einzelnen Zellen in einer Tabelle (TD-Element).
- table-caption: der Titel der Tabelle (CAPTION-Element).
Mit diesen Eigenschaften ist es möglich zu überprüfen, ob und welche Aspekte einer HTML-Tabelle sichtbar sind. So kann beispielsweise die Eigenschaft display auf none gesetzt werden, um ein Element zu verbergen. Listing C verwendet diese Werte, um die Sichtbarkeit der jeweiligen HTML-Elemente zu prüfen.
Listing C
Ein interessanter Aspekt der Verwendung dieser Werte besteht in der Anzeige eines beliebigen Elements als eine Tabelle. Das bedeutet, dass die Anzeigeeigenschaften der Tabelle benutzt werden können, um jegliches Element als Tabelle fungieren zu lassen. Dazu muss lediglich der geeignete Anzeigewert zugewiesen werden.
Nutzung je nach Bedarf
Die HTML-Spezifikation umfasst zwar ebenso Tabellen zur Verarbeitung von Tabellendaten, aber viele Entwickler nutzen die Tabellen nach wie vor für das Seitenlayout. Auch wenn HTML-Tabellen häufig verkannt werden, so sind sie dennoch in den verschiedensten Situationen einsetzbar. Tabellenelemente können unabhängig vom Einsatzzweck mit CSS kombiniert werden, um Aussehen und Funktionalität von Websites zu gestalten.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/