Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Table – Stile für die Gestaltung von Tabellen

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

## border-collapse

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.

#### Beispiel

    <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

↑

## border-spacing

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

#### Beispiel

    <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:

#### Bemerkung

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.

↑

## caption-side

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.

#### Beispiel

    caption { caption-side: bottom; width: auto; text-align: left }

#### Darstellung

(Die Tabellenlegende sollte unter der Tabelle positioniert sein.)

Dies ist die Tabellenlegende
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.

↑

## empty-cells

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 (&nbsp;) 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.

#### Beispiel

    <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:

↑

## table-layout

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.

#### Beispiel

    table { table-layout: fixed; } oder
    <table style="table-layout: auto;">
    </table>

So sollte es aussehen, wenn der Browser die Eigenschaft table-layout unterstützt:

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen