CSS, HTML und Javascript mit {stil}

CCS border-collapse • border-spacing • empty-cells

CSS border-collapse legt die Rahmen von Tabellenzellen zusammen

Wenn für Tabellenzellen ein Rahmen mit dem CSS-Stil border definiert ist, hat jede Zelle ihren separaten Rahmen. Nebeneinander liegende Zellen sind durch zwei Rahmen voneinander getrennt.

border-collapse bestimmt, ob die Rahmen benachbarter Tabellenzellen zusammnenfallen oder ob jede Tabllenzelle einen eigenen Rahmen hat.

border-spacing ist der Abstand zwischen benachtbarten Tabellenzellen. empty-cells regelt die Darstellung leerer Tabellenzellen

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.
Vergleich: border-collapse: separate vs. border-collapse: collapse
Vergleich: border-collapse: separate vs. border-collapse: collapse
table.rahmen { border-collapse: collapse; border: 1px solid silver; }
table.rahmen td { border: 1px solid silver; }
table.rahmen th { border: 1px solid silver; }

border-spacing • Abstand von Tabellenzellen

CSS border-spacing bestimmt den vertikalen und horizontalen Raum zwischen benachbarten Tabellenzellen im separate-Modell und 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 border-spacing plus dem padding der Tabelle zusammen.

Im collapse-Modell wird CSS border-spacing ignoriert.

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

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.

Leere Zellen werden nicht gerendert
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. 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.
separate collapse Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus semper gravida. Romidus lastat endo clinist. Montag Dienstag Mittwoch 3-8° 6-9° 4-7° starker Wind aus Nordwest schwacher Wind aus westlicher Richtung starker Wind aus Nordwest Höchsttemperaturen Windrichtung