css-café

7. Tabellen

• 7.1 caption-side
• 7.2 table-layout
• 7.3 border-collapse
• 7.4 border-spacing
• 7.5 empty-cells

Tabellen können auf unterschiedlichen Ebenen betrachtet werden: Inhaltlich sind sie ein Werkzeug zur Strukturierung von Daten (Spalten und Zeilen), die im Quelltext vorgenommen wird. Visuell zeigen sie ein Gitter aus senkrecht und waagerecht angeordneten Blöcken, deren Darstellung man mit CSS beeinflussen kann.

7.1 caption-side

Positioniert eine spezielle Tabellen-Überschrift [CSS2].

Beispiel:
table#preise {caption-side: bottom;}

Werte	top | bottom | inherit
Default	top
Vererbt	ja

Diese Eigenschaft wird vom IE/win (bis 6) nicht unterstützt.

^ nach oben

7.2 table-layout

Bestimmt, wie der Browser Breitenangaben zur Tabelle und zu Tabellenspalten behandeln soll [CSS2].

Beispiel:
table#preise {table-layout: fixed;}

Werte	auto | fixed | inherit
Default	auto
Vererbt	nein

^ nach oben

7.3 border-collapse

Definiert das Modell für die inneren Trenn- und Rahmenlinien [CSS2].

Beispiel:
table#preise {border-collapse: collapse;}

Werte	collapse | separate | inherit
Default	separate
Vererbt	ja

• collapse – verwendet das zusammenfassende Rahmenmodell, das heißt angrenzende Rahmen benachbarter Zellen werden zusammengefasst;
• separate – verwendet das trennende Rahmenmodell, das heißt um jede Zelle wird ein eigener Rahmen gezeichnet.

^ nach oben

7.4 border-spacing

Definiert den Abstand der Rahmenlinien benachbarter Zellen [CSS2].

Beispiel:
table#preise {border-spacing: 5px 2px;}

Werte	Längenangabe | inherit
Default	0
Vererbt	ja

Es kann ein einzelner Wert angegeben werden, der dann sowohl für horizontale als auch vertikale Abstände gilt. Werden zwei Werte angegeben, entspricht der erste dem horizontalen Abstand, der zweite dem vertikalen. Dies entspricht nicht den üblichen zusammenfassenden Schreibweisen, die Sie von anderen Eigenschaften kennen!

Die Angabe von negativen Werten ist nicht zulässig.

^ nach oben

7.5 empty-cells

Anweisung zur Darstellung leerer Zellen [CSS2].

Beispiel:
table {empty-cells: hide;}

Werte	show | hide | inherit
Default	show
Vererbt	ja

• show – Rahmen und Hintergrund von leeren Zellen werden dargestellt;
• hide – Rahmen und Hintergrund von leeren Zellen werden nicht dargestellt.

Zellen, die im HTML-Code ein geschütztes Leerzeichen ( ) enthalten, gelten nicht als leer.

Diese Eigenschaft wird von keinem der aktuellen Browser völlig korrekt (dem definierten Standard entsprechend) unterstützt.