Cascading Stylesheets
Stil mit <Stil>
Cascading Stylesheets
Stil mit <Stil>
Das W3C hat in CSS1 noch die Hände von Tabellen gelassen – in CSS2 kamen dafür eine Reihe von Eigenschaften speziell für Tabellen hinzu, da die generischen Eigenschaften wie border, width und height den Anforderungen an das Gitternetz der Tabelle nicht immer genügen. Insbesondere fehlt in CSS1 ein Mechanismus, der den vorgegebenen Maßen der Tabelle Vorrang vor den Inhalten gibt, so dass Inhalte den Rahmen der Tabelle vergrößern. Fünf Eigenschaften sind in CSS2 speziell für Tabellen gedacht:
border-collapse • border-spacing • caption-side • empty-cells • table-layout
| IE5+ M1 N6 O5+ Version: CSS2 Erblich: Ja |
border-collapse wählt das Rahmenmodell einer Tabelle. Zwei Rahmenmodelle stehen zur Wahl: collapse und separate (nicht alle Browser unterstützen beide Modelle). | 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.
<table style="border-collapse: collapse" > <caption>border-collapse: collapse</caption> <colgroup> <col style="width: 200px;"> <col style="width: 200px;"> </colgroup> <tr><td>Zelle 1</td><td>Zelle 2</td></tr> <tr><td>Zelle 3</td><td>Zelle 4</td></tr> </table>
So sollte es aussehen, wenn ein Browser border-collapse unterstützt:
| border-collapse: collapse
|
| border-collapse: separate
|
| M1 N6 O5+ Version: CSS2 Erblich: Ja |
border-spacing bestimmt den vertikalen und horizontalen Raum zwischen benachbarten Zellen im separate-Modell. | length length? |
Im separate-Modell hat die Tabelle einen separaten äußeren Rahmen und jede Zelle besitzt zusätzlich noch einen eigenen separaten Rahmen. Der äußere Rahmen der Tabelle berührt die einzelnen Zellenrahmen nicht.
length length? gibt die Größe des Raums zwischen benachbarten Zellen an. Die zweite Angabe ist optional. Wenn nur die erste Länge spezifiziert wird, gilt der erste Wert sowohl für den horizontalen als auch für den vertikalen Raum zwischen benachbarten Zellen. Wenn beide Längenangaben notiert sind, gibt die erste den horizontalen Raum und die zweite den vertikalen Raum an. Negative Werte sind nicht erlaubt.
length kann in einer der folgenden Maßeinheiten angegeben werden (die Voreinstellung ist 0):
| Maßeinheit | Abkürzung | Maßeinheit | Abkürzung |
| Zentimeter | cm | Millimeter | mm |
| ems | em | Pica | pc |
| x-Höhe | ex | Pixel | px |
| Inch | in | Point | pt |
<table style="border-collapse: separate; border-spacing: 20px; border: 4px solid gray;">
<caption>border-spacing: 20px</caption>
<colgroup> <col style="width: 200px;">
<col style="width: 200px;">
</colgroup>
<tr>
<td class="zelle">Zelle 1</td>
<td class="zelle">Zelle 2</td>
</tr>
<tr>
<td class="zelle">Zelle 3</td>
<td class="zelle">Zelle 4</td>
</tr>
</table>
So sollte es aussehen, wenn der Browser border-spacing unterstützt:
|
|
|
|
Wenn border-spacing: 0 (Voreinstellung) angegeben wird, teilen sich die Ränder der Zellen nicht den gleichen Raum (wie das bei der Deklaration von border-collapse: collapse der Fall sein sollte), sondern liegen nebeneinander.
| IE5+ M1 N6 Version: CSS2 Erblich: Ja |
caption-side legt die Positionierung der Tabellenlegende (caption) fest – ob die Legende unten, links, rechts oder oben gesetzt werden soll. Diese Eigenschaft ist für die Benutzung mit dem <caption>-Tag gedacht. | bottom | left | right | top |
Wenn caption rechts oder links neben der Tabelle platziert wird, kann der Inhalt mit vertical-align auf der Grundlinie (bottom), an der Oberkante der Tabelle (top) oder in der Mitte (middle) ausgerichtet werden.
bottom platziert eine caption-box unter der Tabelle.
left platziert eine caption-box auf der linken Seite der Tabelle.
right platziert eine caption-box auf der rechten Seite der Tabelle.
top ist die Voreinstellung und platziert eine caption-box über der Tabelle.
caption { caption-side: bottom; width: auto; text-align: left }
(Die Tabellenlegende sollte unter der Tabelle positioniert sein.)
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Bemerkung
top (die Voreinstellung) und bottom werden von IE5+ und Mozilla1/N6 dargestellt; die Werte left und right hingegen nicht.
| IE 5 (Mac) M1 N6 O5+ Version: CSS2 Erblich: Ja |
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. | hide | show |
Wenn visibility: hidden angegeben wurde, wird die Zelle als leere Zelle ohne sichtbaren Inhalt angesehen. 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.
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.
<table style="border:1px solid black; border-collapse: separate; empty-cells:hide">
<caption>empty-cells: hide</caption>
<colgroup> <col style="width: 100px;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tr>
<td>in der Zelle</td>
<td>in der Zelle</td>
<td></td>
</tr>
</table>
So sollte es aussehen, wenn ein Browser die Eigenschaften show und hide unterstützt:
 |
 |
| IE6 (PC) Version: CSS2 Erblich: Ja |
table-layout legt den Layoutalgorithmus für die Konstruktion der Tabelle fest. | auto | fixed |
auto ist die Voreinstellung und weist den Browser an, die Tabelle abhängig von den Inhalten der Tabelle aufzubauen. Der Browser muss also zunächst den gesamten Inhalt der Tabelle laden, bevor die Tabellendimensionen berechnet werden können, dadurch wird der Aufbau der Seite verzögert.
fixed weist den Browser an, die Tabelle entsprechend der Tabellenbreite (width), der Breite der Spalten, der Rahmen und dem angegebenen Raum zwischen den Zellen zu berechnen. Das Layout der Tabelle hängt nicht vom Inhalt ab und die Tabelle kann schneller dargestellt werden.
table { table-layout: fixed; } oder
<table style="table-layout: auto;">
</table>
So sollte es aussehen, wenn der Browser die Eigenschaft table-layout unterstützt:
 |
 |