CSS border-spacing • empty-cells

separate / collapse

CSS hat zwei Grundformen für Tabellen: separate und collapse

• border-collapse: collapse führt die Rahmen benachbarter Zellen zusammen,
• border-collapse: separate ist die Voreinstellung, in der Tabellenzellen einen kleinen Abstand voneinander halten und jede Tabellenzelle einen eigenen Rahmen haben kann.

border-spacing holt den Charme der HTML-Tabellen aus der Zeit vor CSS zurück. Damals gab es spezielle HTML-Attribute cellpadding und cellspacing für das table-Tag, die genauso wie das border-Attribut in HTML5 nicht mehr vertreten sind.

Mit zwei Werten bestimmt der erste Wert den Abstand zwischen den Zellen einer Zeile, der zweite Wert den Abstand der Zellen in den aufeinander folgenden Zeilen.

table {
   border-spacing: 16px 8px; 
}

Hat die Tabelle eine Hintergrundfarbe (background-color), scheint die Farbe im freien Raum zwischen den Tabellenzellen durch. Im collapse-Modell wird CSS border-spacing ignoriert.

Nur mal so – die Reminiszenz an die HTML-Tabelle der Ära vor CSS: So sahen Tabellenrahmen früher aus.

<table border="9" cellpadding="6" cellspacing="16">
	…
</table>

border für Tabellenzellen

Im separate-Modell hat die Tabelle einen separaten äußeren Rand und jede Zelle besitzt zusätzlich einen eigenen separaten Rahmen. Der äußere Rand der Tabelle berührt die einzelnen Zellenrahmen nicht.

Die Distanz zwischen dem Zellenrahmen und dem Tabellenrahmen setzt sich aus border-spacing plus dem padding der Tabelle zusammen.

<table style="border-collapse: separate; border-spacing: 10px 15px;">

Wenn border-spacing: 0 (Voreinstellung) angegeben wird, teilen sich die Ränder der Zellen nicht den gleichen Raum (wie bei der Deklaration von border-collapse: collapse), sondern liegen nebeneinander.

CSS border-spacing

Erblich: Ja

border-spacing

length | length length

border-spacing: 10px;
                ▲
                │
                └----- horizontaler und vertikaler Raum

border-spacing: 10px 15px;
                ▲    ▲
                │    │
                │    └----- vertikaler Raum
                └----- horizontaler Raum

length length

gibt die Größe des Raums zwischen benachbarten Zellen an. Die zweite Angabe ist optional.

Wenn nur die erste Länge notiert ist, gilt der erste Wert sowohl für den horizontalen als auch für den vertikalen Raum zwischen benachbarten Zellen.

Wenn Sie beide Längen angegeben, ist die erste der horizontalen Raum und die zweite der vertikale Raum. Negative Werte sind nicht erlaubt.

length kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

empty-cells: Anzeige leerer Tabellenzellen

CSS empty-cells legt fest, ob Rahmen um leere Tabellenzellen gezogen werden (eine leere Zelle hat keinen sichtbaren Inhalt). Die Eigenschaft wird nur beim separate-Modell angewendet.

empty-cells: hide zeigt die Zelle als leere Zelle ohne sichtbaren Inhalt. Auch Carriage Return, Line Feed, Tab und Leerzeichen sind kein sichtbarer Inhalt. Ein erzwungener Leerraum ( ) allerdings gilt als sichtbarer Inhalt.

table { background: silver; empty-cells: hide; }

Wenn das separate-Modell unterstützt wird, muss sich hinter leeren Tabellenzellen und im border-spacing die Hintergrundfarbe der Tabelle zeigen. empty-cells: hide wird von allen Browsern unterstützt.

CSS empty-cells

Erblich: Ja

empty-cells

hide | show | inherit

hide

weist den Browser an, keinen Rahmen um leere Zellen darzustellen.

show

ist die Voreinstellung und weist den Browser an, einen Rahmen um leere Zellen darzustellen.