Stil mit {stil}

Nov 2007

Tabellen mit CSS gestalten

Mit den modernen CSS-Eigenschaften lassen sich Tabellen elegant und effizient gestalten.

Das W3C hat in CSS1 noch die Hände von Tabellen gelassen – erst in CSS2 kamen Eigenschaften für Tabellen hinzu, da Attribute wie border, width und height den Anforderungen an das Raster der Tabelle nicht immer genügen.

HTML regelt mit Tags wie colgroup und colspan die Breite der Spalten von Tabellen innerhalb des table-Tags, aber CSS liefert zusätzlich einen Mechanismus, der den vorgegebenen Maßen der Tabelle Vorrang vor den Inhalten gibt, damit übergroße und überlange Inhalte den Rahmen der Tabelle nicht vergrößern.

CSS speziell für Tabellen

• [ table-layout ]
• Rahmen für Tabellen border-collapse
• Abstand der Linien border-spacing
• Tabellen-Legende caption-side
• Leere Tabellenzellen empty-cells

table-layout: fixed

Die Inhalte von Tabellenzellen nehmen ohne weitere Formatierung immer den Raum ein, den sie für die Darstellung benötigen. So dehnen lange Wörter oder Bilder die Breite einer Tabellenzelle, auch wenn die Breite durch die CSS-Eigenschaft width begrenzt ist. Auch die Angabe von height wird nur eingehalten, wenn die Inhalte die vorgesehene Höhe nicht überschreiten.

table-layout

auto | fixed | inherit

auto (Voreinstellung)

weist den Browser an, die Tabelle abhängig von den Inhalten der Tabelle aufzubauen. Der Browser muss den gesamten Inhalt der Tabelle laden, bevor die Tabellendimensionen berechnet werden können. Das verzögert den Aufbau der Seite.

fixed

weist den Browser an, die Tabelle entsprechend der Tabellenbreite (width), der Breite der Spalten, der Rahmen und dem angegebenen Raum zwischen den Zellen zu berechnen. Das Layout der Tabelle hängt nicht vom Inhalt ab und die Tabelle kann schneller dargestellt werden.

Hinweis: Browser, die table-layout: fixed unterstützen, schneiden entweder überbreite Inhalte ab oder lassen den Text weiter laufen, dass die Inhalte in benachbarte Zellen überlaufen.

table { table-layout: fixed; } 

zurück zum Seitenanfang