CSS border-spacing • empty-cells

CSS border-spacing

border-spacing regelt den Abstand zwischen den Zellen einer Tabelle mit einem oder zwei Werten. Mit nur einem Wert ist der Abstand zwischen benachbarten Zellen immer gleich, auch zwischen den Zellen aufeinander folgender Zeilen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

HTML-Tabelle old style mit border-spacing, cell-spacing
HTML-Tabellen aus der Frühzeit des Webs mit border, cellspacing und cellpadding
<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.

free space between table cells
border-spacing Platz zwischen Tabellenzellen, space between table cells
<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
style="border-spacing: 10px;
                        ^
                        |
                        +----- horizontaler und vertikaler Raum

style="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 (&nbsp;) allerdings gilt als sichtbarer Inhalt.

Tabelle mit leeren Zellen
Die Zellen oben links in Reihe 1 und 2 sind leer.
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.