So werden Tabellen mit CSS gestaltet

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.