CSS, HTML UND JAVASCRIPT MIT {STIL}

Wenn Tabellenzellen mit einem Rahmen gerendert werden, entsteht ein doppelter Rahmen durch nebeneinander liegende Zellen. CSS border-collapse fügt die nebeneinander liegenden Rahmen zu einem Rahmenstrich zusammen.

border-collapse

Erblich: Ja

border-collapse

collapse | separate

collapse

Im collapse-Modell hat die Tabelle einen äußeren Rand und benachbarte Zellen teilen sich die internen Rahmen (in Netscape erscheint dieses Modell als separate-Modell).

separate

Im separate-Modell hat die Tabelle einen separaten äußeren Rahmen und jede Zelle besitzt einen eigenen separaten Rahmen. Der äußere Rahmen der Tabelle berührt die einzelnen Zellenrahmen nicht. Mit CSS2.1 ist "separate" die Voreinstellung.

Kollabierende Rahmen für Zellen

table.rahmen { border-collapse: collapse; border: 1px solid silver; }
table.rahmen td { border: 1px solid silver; }
table.rahmen th { border: 1px solid silver; }

CSS table border-spacing • Abstand zwischen Tabellenzellen

CSS border-spacing bestimmt den vertikalen und horizontalen Raum zwischen benachbarten Tabellenzellen im separate-Modell.

Das holt den Charme der HTML-Tabellen aus der Zeit vor CSS zurück …

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 dem border-spacing plus dem padding der Tabelle zusammen.

Im collapse-Modell wird CSS border-spacing ignoriert.

<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

length length

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

style="border-spacing: 10px;
                        ^
                        |
                        +----- horizontaler und vertikaler Raum

style="border-spacing: 10px 15px;
                        ^    ^
                        |    |
                        |    +----- vertikaler Raum
                        +----- horizontaler Raum

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).

CSS 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.

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

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. IE7 / IE8 unterstützen empty-cells: hide also nicht. IE9 zeigt Tabellen mit empty-cells: hide korrekt.

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.