Allgemeines zur Tabellenformartierung

Tabellen werden erst seit CSS 2.0 gesondert behandelt und haben eigene CSS-Eigenschaften. Dennoch gibt es auch eine Menge Eigenschaften von CSS 1.0, die sich auf Tabellen, Spalten und Zeilen anwenden lassen. Auf die HTML-Elemente table, tr, colgroup, col, thead, tbody, tfoot, th und td lassen sich Formatierungen anwenden wie:

• Schriftformatierung
• Ausrichtung und Absatzkontrolle
• Innenabstand
• Rahmen
• Hintergrundfarben und -bilder

Vor allem aber bei Rahmen genügen die dafür üblichen CSS-Eigenschaften alleine nicht, um den Anforderungen an das Gitternetz einer Tabelle gerecht zu werden. Deshalb bietet CSS 2.0 die Möglichkeit an, zwei verschiedene Rahmenmodelle zu unterscheiden. Dadurch kann dem Browser mitgeteilt werden, wie er die Außenrahmen zweier angrenzender Tabellenzellen behandeln soll.

Für Angaben zur Breite und Höhe von Tabellenspalten oder -zeilen sind die CSS-Eigenschaften width und height zwar geeignet, doch ist es wirklich manchmal wünschenswert, dass vorgegebene Breiten und Höhenangaben in jedem Fall und auch mal mit Priorität vor dem Inhalt der Zellen behandelt werden. Diese Option ist nun mit CSS 2.0 für Tabellen einstellbar.

Andere tabellenspezifische Eigenschaften regeln Angaben, die auch in HTML in Form von Attributen möglich sind. Die entsprechenden Attribute sind in HTML 4.0 jedoch als "deprecated" gekennzeichnet, also als künftig unerwünscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden.

Weiterhin wichtig im Zusammenhang mit Tabellen ist seit CSS 2.0 die an anderer Stelle beschriebene CSS-Eigenschaft display. Damit ist es möglich, Tabelleneigenschaften auf andere Elemente als Tabellenelemente anzuwenden. Das mag sich zwar für HTML komisch anhören, aber CSS ist ja auch eine mögliche Style-Sprache zur Darstellung von XML-Daten. Und da es in XML keine Möglichkeit gibt, ein Element mit semantischen Eigenschaften wie "Tabellenzelle" oder "Tabellenzeile" auszuzeichnen, muss das die Style-Sprache übernehmen, die solche Daten anzeigt.

caption-side: (Ausrichtung der Tabellenüberschrift)

Sie können für Tabellen in HTML mit dem caption-Element eine Tabellenüberschrift bestimmen. Mit der hier beschriebenen Style-Sheet-Angabe können Sie die Position dieser Überschrift festlegen.

caption-side:

Mit caption-side: können Sie die Position der Tabellenüberschrift bestimmen. Folgende Angaben sind erlaubt: top = oberhalb der Tabelle. bottom = unterhalb der Tabelle. left = links neben der Tabelle. right = rechts neben der Tabelle. Beachten Sie: Diese Eigenschaft wird vom Internet Explorer bis zur Version 6.x noch nicht interpretiert.

Beispiel:

<caption style="caption-side:top">xxxxxxx</caption>

table-layout: (fixe/variable Breiten)

Mit dieser Eigenschaft können Sie entscheiden, wie der Browser Breitenangaben zur Tabelle und zu Tabellenspalten behandeln soll, die Sie mit der CSS-Eigenschaft width angeben. Dies hat den Vorteil, dass große Tabellen schneller angezeigt werden können, da der Browser nicht mehr erst den gesamten Inhalt der Tabelle einlesen muss, um die tatsächliche Anzeigebreite einzulesen.

table-layout:

Mit table-layout: beeinflussen Sie die Tabellenanzeige bei Breitenangaben. Folgende Angaben sind erlaubt: fixed = Breitenangaben haben Vorrang vor dem Zelleninhalt. auto = Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung).

Beispiel:

<table border="1" style="table-layout:fixed"> <tr> <td style="width:100px">100 px breit xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> <td style="width:200px">200 px breit xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> <td style="width:300px">300 px breit xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> </tr> </table>

border-collapse (Rahmenmodell)

Mit dieser Eigenschaft können Sie festlegen, ob Einzelrahmen von Tabellenzellen zusammenfallen sollen oder nicht.

border-collapse:

Mit border-collapse: beeinflussen Sie die Art, wie Einzelrahmen benachbarter Tabellenzellen reagieren. Folgende Angaben sind erlaubt: seperate = Zellenrahmen fallen nicht zusammen. collapse = Zellenrahmen fallen zusammen.

Beispiel:

<table style="color:white"> <tr> <td style="background-color:#000080">Tabelle</td> <td style="background-color:#400040">ohne border-collapse:</td> </tr> </table> <table style="border-collapse:collapse;color:white"> <tr> <td style="background-color:#000080">Tabelle</td> <td style="background-color:#400040">border-collapse:collapse</td> </tr> </table>

border-spacing (Rahmenabstand im Gitternetz)

Mit dieser Eigenschaft bestimmen Sie den Abstand zwischen Rahmen im sichtbaren Gitternetz einer Tabelle.

border-spacing:

Mit border-spacing: können Sie für ein table-Element den Abstand der Zellenrahmen voneinander bestimmen. Erlaubt ist eine numerische Angabe. Beachten Sie: Diese Eigenschaft wird vom Internet Explorer bis zur Version 6.x noch nicht interpretiert.

Beispiel:

<table style="border-spacing:20px">

empty-cells (Anzeige/Nichtanzeige leerer Zellen)

Mit dieser Eigenschaft können Sie festlegen, ob Tabellenzellen ohne Inhalt bei sichtbarem Gitternetz einen Rahmen erhalten sollen oder nicht.

empty-cells:

Mit empty-cells: bestimmen Sie, ob Rahmen leerer Tabellenzellen angezeigt werden oder nicht. Folgende Angaben sind erlaubt: show = Zellenrahmen leerer Tabellenzellen werden angezeigt. collapse = Zellenrahmen leerer Tabellenzellen werden unterdrückt (Voreinstellung). Beachten Sie: Diese Eigenschaft wird vom Internet Explorer bis zur Version 6.x noch nicht interpretiert.

Tabelle 1

Tabelle 2