Rahmen und Innenabstände für Zellen einstellen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Um einen stärkeren visuellen Eindruck als bei der standardmäßigen Tabellendarstellung zu erreichen, sollen die Rahmen und die Innenabstände von Tabellenzellen angepasst werden (siehe folgende Abbildung).

Tabellenzellen mit angepassten Rahmen und Innenabständen

Abbildung: Tabellenzellen mit angepassten Rahmen und Innenabständen.

Lösung

Verwenden Sie die Eigenschaft padding, um den Abstand zwischen dem Zelleninhalt und den Rändern der Zelle festzulegen. Zur Definition der Rahmen für die Zellen und die Tabelle selbst gibt es die Eigenschaft border (Anmerkung: Falls Sie sich wundern, warum im Code die Styleanweisungen für td und th+th nicht zusammengefasst worden sind, obwohl sie identisch sind: Die Internet Explorer 5.5 und 6 ignorieren jede Anweisung, in der sich der Nachbarschaftsselektor + befindet. Sie tun dies auch, wenn dieser nur Teil einer Aufzählung von Selektoren ist.):

table {
 border-collapse: collapse;
 border: 5px solid #444;
}
td {
 padding: 4px;
}
th {
 color: white;
 background-color: black;
}
td {
 border: 5px solid #666;
}
th+th {
 border: 5px solid #666;
}
td+td {
 border: 5px solid #ccc;
 text-align: center;
}
td#winner {
 border: 7px dotted #999;
}

Diskussion

Für HTML-Tabellen gibt es zwei Modelle für die Darstellung von Rahmen: zusammengefasst (collapse) und getrennt (separate). Beim Modell der zusammengefassten Rahmen teilen sich aneinandergrenzende Zellen die Rahmenseiten. Im Modell der getrennten Rahmen besitzt jede Tabellenzelle ihren eigenen Rahmen. Beim Schreiben dieses Buches ist das Modell der zusammengefassten Rahmen am weitesten verbreitet und wird daher von Designern auch häufiger verwendet.

Heutzutage verwenden alle Browser standardmäßig das Modell der zusammengefassten Rahmen. Einzige Ausnahme ist hier Firefox, der Tabellen mit getrennten Tabellenzellen darstellt. Da die CSS-Spezifikation hier kein bestimmtes Verhalten vorschreibt, empfiehlt es sich, das gewünschte Modell im CSS-Code explizit anzugeben. Um die Zellenrahmen zusammengefasst darzustellen, geben Sie der Eigenschaft border-collapse den Wert collapse:

table {
 border-collapse: collapse;
}

In HTML können Sie anhand des Attributs border für das table-Element die Rahmenbreite für eine Tabelle und die enthaltenen Zellen festlegen. Für separate Rahmenbreiten können Sie die CSS-Eigenschaft border verwenden.

Widerspricht die Rahmendefinition für eine Zelle anderen Regeln, kommen die folgenden Regeln zum Einsatz, um die Konflikte aufzulösen:

  • Hat border-style den Wert hidden, werden auch alle anderen Rahmenseiten verborgen.
  • Hat border-style den Wert none, haben andere Werte für border-style Vorrang.
  • Außer in Fällen, in denen border-style für eine Zelle den Wert hidden oder none hat, bekommt ein breiterer Rahmen Vorrang gegenüber schmaleren. Haben zwei Rahmen die gleiche Breite, wird der Rahmenstil anhand der folgenden (absteigenden) Reihenfolge festgelegt: double, solid, dashed, dotted, ridge, outset, groove, inset.
  • Haben zwei Zellen die gleiche Breite und den gleichen Rahmenstil, aber unterschiedliche Farbdefinitionen, so wird die Farbe anhand der folgenden Rangfolge von Elementen festgelegt: Zelle, Zeile, Zeilengruppe, Spalte, Spaltengruppe und die Tabelle selbst.

Das zweite Rahmenmodell wird als separate (getrennt) bezeichnet. Dabei besitzt jede Zelle ihren eigenen Rahmen und kann daher unabhängig von den Rahmen anderer Zellen gestaltet werden. Beim Modell der getrennten Rahmen können die horizontalen und vertikalen Abstände zwischen den Zellen anhand der Eigenschaft border-spacing festgelegt werden:

table#runoffdata {
 border-collapse: separate;
 border-spacing: 4px 4px;
}

Hat die Eigenschaft border-collapse den Wert separate, werden eventuelle Stildefinitionen für Zeilen, Spalten oder Gruppen von Tabellenzellen nicht berücksichtigt. Außerdem kann anhand der Eigenschaft empty-cells festgelegt werden, ob Zellen ohne Inhalt dargestellt werden sollen oder nicht.

Zwar haben Webentwickler mit dem Modell der getrennten Rahmen größere Kontrolle über die Darstellung von Tabellen, allerdings wurde es zu dem Zeitunkt, als dieses Buch geschrieben wurde, nur von Firefox, Mozilla, Safari und Netscape 6 unterstützt, aber nicht von Internet Explorer für Windows. Aus diesem Grund halten sich die meisten Webdesigner an das Modell der zusammengefassten Rahmen.

Siehe auch

Die CSS 2.1-Spezifikation zu den verschiedenen Rahmenmodellen und eine ausführliche Diskussion der Darstellung von HTML-Tabellen mit CSS von Kapitel 11 in CSS – Das umfassende Handbuch von Eric A. Meyer (O’Reilly).

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln