Tabellen und Tabellenelemente verhalten sich anders als andere Elemente. Das Standard-Boxmodell gilt nicht für Tabellen. Die rechteckigen Boxen mit Inhalt, Polsterung, Rahmen und Randabstand werden stattdessen durch das CSS-Tabellenmodell beschrieben, das in diesem Abschnitt Schritt für Schritt erläutert wird.

Das CSS-Tabellenmodell beeinflusst die Darstellung folgender Eigenschaften an Tabellenelementen:

• background und border (sowie natürlich alle »untergeordneten« Eigenschaften wie background-color, border-width, border-left-color und so weiter) werden nach speziellen Regeln berechnet.
• margin ist nur auf Tabellen selbst anwendbar, das heißt auf Elemente, deren display-Eigenschaft den Wert table oder inline-table hat.
• padding beeinflusst nur Tabellen und Tabellenzellen, also Elemente, deren display-Eigenschaft den Wert table, inline-table oder table-cell hat.

Darüber hinaus gibt es Unterschiede in der Berechnung der Breite und Höhe.

Zum Seitenanfang

Virtuelle Tabellenschichten und Transparenz

Rufen Sie sich noch einmal den Aufbau von Tabellen in Erinnerung. Wenn man wollte, könnte man sagen, dass zwischen dem Container für die Auszeichnung von Tabellen table und den eigentlichen Tabellenzellen td und th viele weitere Boxen liegen, konkret ausgezeichnete Boxen und berechnete, »virtuelle« Boxen:

Konkret ausgezeichnet sind folgende Boxen:

• Es gibt Zeilen, ausgezeichnet durch tr, innerhalb deren sich die Zellen befinden.
• Es gibt Zeilengruppen, ausgezeichnet durch thead (Tabellenkopf), tfoot (Tabellenfuß) und tbody (Tabellenrumpf).

Aber es gibt noch weitere Boxen, die die Zellen zwar nicht im XHTML-Quelltext, aber letztendlich im Tabellenmodell umfassen:

• Die Tabelle enthält so viele Spalten wie
  • durch col- oder colgroup-Elemente in Verbindung mit entsprechenden span-Attributen definiert wurden oder
  • es maximal Zellen in einer Zeile gibt.
• Spalten können zu Spaltengruppen, ausgezeichnet durch colgroup, zusammengefasst werden.

Aus diesen Überlegungen ergeben sich sechs Schichten, die im CSS-Tabellenmodell übereinanderliegen, je eine Schicht für den Tabellencontainer, die Spaltengruppen, die Spalten, die Zeilengruppen, die Zeilen und die Zellen. Jede dieser Schichten können Sie sich als transparente Folie vorstellen, die wie auf einem Lichtprojektor die darunterliegende Schicht überdeckt, wobei diese jedoch durchscheint. Abbildung 7.32 illustriert diese Schichten.

Abb. 7.32: Die sechs Tabellenschichten, von unten nach oben: Tabellencontainer, Spaltengruppen, Spalten, Zeilengruppen, Zeilen, Zellen

Das Schichtmodell ist wichtig, um herauszufinden, welche Hintergrundfarbe ein bestimmter Teil einer Tabelle hat. Für jedes Tabellenelement können Sie eine eigene Hintergrundfarbe oder ein eigenes Hintergrundbild deklarieren. Der Hintergrund, der für ein Element in einer der Schichten gesetzt wird, ist jedoch nur dann sichtbar, wenn die darüberliegenden Schichten einen transparenten Hintergrund haben. Oder anders ausgedrückt: Wenn Sie für Elemente einer Schicht einen Hintergrund deklarieren, überdeckt dieser den Hintergrund der darunterliegenden Schichten.

Zum Seitenanfang

Algorithmen für die Tabellenbreite: Die Eigenschaft table-layout

Die Eigenschaft table-layout gibt an, welcher Algorithmus für die Berechnung der Breite einer Tabelle verwendet wird.

Das automatische Tabellenlayout (auto) ist das für den Browser deutlich aufwendigere der beiden. Die Tabellenbreite wird durch die Breite ihrer Spalten und der dazwischenliegenden Rahmen festgelegt, wobei die Spaltenbreite sich an den Inhalten orientiert. Die Tabelle muss daher vollständig heruntergeladen sein, bevor sie berechnet und dargestellt werden kann, vor allem dann, wenn die Spaltenbreite nicht durch die Elemente colgroup und col festgelegt ist, sondern sich aus der Breite der einzelnen Tabellenzellen ergibt. Für Webautoren ist dieser Algorithmus häufig der komfortablere, da im Allgemeinen alle Zelleninhalte vollständig dargestellt werden; aus diesem Grund ist auto der Initialwert.

Beim festen Tabellenlayout (fixed) ist die Tabellenbreite nur von den Vorgaben für die Tabellenspalten mittels col und colgroup und den Breiten der Zellen der ersten Zeile abhängig. Breitenangaben haben folglich Vorrang vor den Inhalten. So kann der Browser bereits mit dem Aufbau der Tabelle auf dem Bildschirm beginnen, wenn er die Tabelle noch nicht vollständig heruntergeladen hat. Sollte der Inhalt einer der folgenden Zellen breiter sein, als die Tabellenbreiten beziehungsweise die Zellen der ersten Zeile festlegen, hängt es vom Wert der Eigenschaft overflow ab, wie der überfließende Teil behandelt wird.

Berechnung der Tabellenbreite

Die genaue Berechnung der Tabellenbreite geht in vier Schritten vor sich:

1. Falls die Breite von einer oder mehreren Spalten explizit deklariert ist, wird diese direkt verwendet, andernfalls bestimmt jede Zelle der ersten Zeile die Breite der zugehörigen Spalte.
2. Wird für eine oder mehrere Spalten keine Breite definiert, wird der noch verfügbare Platz auf diese aufgeteilt.
3. Die Summe aller Werte für Spaltenbreiten, Zwischenräume und Rahmen ergibt die Gesamtbreite der Tabelle.
4. Wurde der Tabelle selbst eine Breite zugewiesen, die über die berechnete Breite hinausgeht, wird die Differenz beider Werte gleichmäßig auf die Spalten verteilt.

Festes Tabellenlayout eignet sich nicht für jede Form von Tabellen, sondern nur für Tabellen, deren Inhalte beziehungsweise deren Inhaltsbreiten bereits im Vorfeld überschaubar und innerhalb einer Spalte ähnlich sind.

Zum Seitenanfang

Algorithmus für die Tabellenhöhe

Die Höhe einer Tabelle wird in drei Schritten berechnet:

1. Zunächst wird die Höhe jeder einzelnen Zelle bestimmt. Die Mindesthöhe ist abhängig vom Zelleninhalt und der vertikalen Ausrichtung. Falls eine Höhe mittels der Eigenschaft height für td oder th vorgegeben wurde, wird geprüft, welcher der beiden Höhenwerte der größere ist. Dieser Wert wird dann verwendet.
2. Anschließend wird die Höhe jeder Zeile bestimmt. Die Mindesthöhe wird durch die höchste Zelle der Zeile bestimmt. Auch hier gilt: Falls eine Höhe mittels der Eigenschaft height für tr vorgegeben wurde, wird geprüft, welcher der beiden Höhenwerte der größere ist, und dieser dann verwendet. Zudem werden auch alle Zellen innerhalb der Zeile auf diesen Wert gesetzt, damit alle Zellen gleich hoch sind.
3. Die Gesamthöhe der Tabelle ergibt sich aus den einzelnen Zeilenhöhen zuzüglich Rahmen und Abständen. Wird die Tabellenhöhe mittels der Eigenschaft height für table explizit festgelegt, wird dieser Wert auch hier nur dann verwendet, wenn er größer als der berechnete Wert ist. Der zusätzliche Platz wird dann gleichmäßig auf die Zeilen (und somit auf die Zellen) aufgeteilt.

Zum Seitenanfang

Rahmenmodell: Die Eigenschaft border-collapse

Für jedes Tabellenelement können Sie einen Rahmen definieren, wodurch es schnell zu Konflikten kommen kann. Wenn Sie verschiedenfarbige und unterschiedlich dicke Rahmen für table, für tbody und für td definieren, wie soll das Gitter, das daraus entsteht, aussehen? CSS bietet zwei Darstellungsmöglichkeiten an: Beim Modell der getrennten Rahmen werden Rahmen nebeneinander gezeichnet, beim Modell der zusammenfallenden Rahmen überlagern sich Rahmen benachbarter Elemente nach bestimmten Regeln.

Welches Rahmenmodell Sie verwenden, ist letztendlich Geschmackssache.

Die Eigenschaft border-collapse legt fest, welches Rahmenmodell für die Darstellung einer Tabelle verwendet werden soll.

Beim Wert separate wird wird das Modell der getrennten Rahmen verwendet. Es erlaubt Rahmen nur für die Elemente table, td und th, die mit einem kleinen Abstand voneinander dargestellt werden. Die Größe des Abstands können Sie über die Eigenschaft border-spacing beeinflussen. Leere Zellen werden in Abhängigkeit von der Eigenschaft empty-cells dargestellt.

Beim Wert collapse wird das Modell der zusammenfallenden Rahmen verwendet. Die Deklaration eines Rahmens ist für alle Tabellenelemente erlaubt, wobei mithilfe folgender Regeln entschieden wird, wie der Rahmen dargestellt werden soll, wenn Deklarationen für unterschiedliche Tabellenelemente miteinander in Konflikt geraten (etwa Deklarationen für tr und td):

Regelfolge

1. Die Deklaration border-style: hidden; hat Priorität vor allen anderen Angaben.
2. Breite Rahmenstärken (border-width) werden gegenüber schmalen bevorzugt.
3. Bei gleich breiten Rahmenstärken entscheidet die Rahmenart (border-style) in folgender Reihenfolge: Die höchste Priorität hat double, anschließend folgen solid, dashed, dotted, ridge, outset, groove und zuletzt inset.
4. Unterscheiden Rahmen sich nur in der Farbe, wird nach dem Element gewichtet, zu dem der Rahmen gehört. Dabei wird das Modell der Tabellenschichten herangezogen: Höchste Priorität hat die Angabe für eine Zelle (td, th), anschließend für eine Zeile (tr), für eine Zeilengruppe (thead, tfoot, tbody), eine Spalte (col), eine Spaltengruppe (colgroup) und schließlich für den Tabellencontainer (table) selbst.
5. Die Deklaration border-style: none; hat die niedrigste Priorität.

Beispiel für den Aufbau eines Rahmenkonzepts

Um den Unterschied zwischen beiden Rahmenmodellen zu illustrieren, folgt ein Beispiel in mehreren Schritten. Ich versehe eine Tabelle mit Öffnungszeiten Schritt für Schritt mit Rahmen, wobei ich jeweils zeige, wie sich die einzelnen Deklarationen auf das Modell der getrennten und das Modell der zusammenfallenden Rahmen auswirken.

Erster Schritt

Im ersten Schritt deklariere ich für dieselbe Tabelle ein Mal border-collapse: separate; und ein Mal border-collapse: collapse;. Zusätzlich ziehe ich einen 3 Pixel breiten dunkelblauen Rahmen um die Tabelle. Sie sehen sofort, dass die obere Tabelle breiter ist als die untere, da Browser zwischen den Zellen (besser gesagt: zwischen den Border-Bereichen um die Zellen) einen kleinen Abstand darstellen.

/* Rahmen um den Tabellencontainer */
table { border: 3px solid navy; }

Abb. 7.33: Erster Schritt: Rahmen um die Tabelle

Zweiter Schritt

Im zweiten Schritt deklariere ich Rahmen für die Spaltengruppen.

Zum einen ziehe ich einen 3 Pixel breiten grünen Rahmen um den Tabellenkopf und den Tabellenfuß. Dieser überschreibt den Rahmen um die Tabelle aufgrund Regel 4, da gleichartige Deklarationen für Zeilengruppen höher priorisiert sind als für Tabellencontainer.

Zugleich setze ich den linken und den rechten Rahmen für den Tabellenrumpf auf hidden. Diese Angabe hat Priorität vor allen anderen Angaben (Regel 1) und überschreibt somit die Rahmendeklaration für table.

Auf die Darstellung der ersten Tabelle haben diese Regeln erwartungsgemäß keine Auswirkung.

/* Rahmen um Tabellenkopf und -fuß */
thead, tfoot { border: 3px solid green; }

/* Rahmen um Tabellenrumpf */
tbody {
  border-left: hidden;
  border-right: hidden;
}

Abb. 7.34: Zweiter Schritt: Rahmen um Spaltengruppen

Dritter Schritt

Als Nächstes erhalten die Tabellenzeilen einen Rahmen. Die Schicht, in der die Zeilen liegen, hat zwar eine höhere Priorität als alle bisher angesprochenen Schichten, jedoch ist die Rahmendicke geringer (Regel 2), sodass der blaue Rahmen nur dort zu sehen ist, wo es zu keinem Konflikt mit den bisher vorgenommenen Rahmendeklarationen kommt.

Auch diese Regel hat auf die Darstellung der ersten Tabelle keinen Einfluss.

/* Rahmen um Tabellenzeilen */
tr { border: 2px solid blue; }

Abb. 7.35: Dritter Schritt: Rahmen um Zeilen

Vierter Schritt

Der nächste Schritt ist nun besonders interessant. Datenzellen erhalten in diesem Schritt einen 1 Pixel dicken schwarzen Rahmen, der bei Kopfzellen durchgezogen und bei Datenzellen punktiert dargestellt werden soll. Aufgrund der geringen Strichdicke (Regel 2) werden diese Rahmen nur dort gezeichnet, wo es nicht zu Konflikten mit bisherigen Rahmen kommt. Interessant ist nun die Frage, wie der Rahmen zwischen Kopf- und Datenzellen aussieht: durchgezogen oder punktiert? Antwort gibt Regel 3: Es gewinnt der durchgezogene Rahmen aufgrund seiner höheren Priorität.

Beide Deklarationen beeinflussen nun auch die Darstellung der ersten Tabelle. Jedoch kann es bei getrennten Rahmen nicht zu Konflikten kommen: Alle Rahmen werden vollständig gezeichnet. Nun sehen Sie auch den Abstand, der zwischen den Zellen dargestellt wird.

/* Rahmen um Tabellenzellen */
th { border: 1px solid black; }

td { border: 1px dotted black; }

Abb. 7.36: Vierter Schritt: Rahmen um Zellen

Zum Seitenanfang

Rahmenabstand: Die Eigenschaft border-spacing

Die Eigenschaft border-spacing gibt beim Tabellenmodell der getrennten Rahmen den Abstand zwischen Zellen an. Die Zwischenräume werden mit den für table definierten Hintergrundeigenschaften gefüllt. Beim Modell mit zusammenfallenden Rahmen hat diese Eigenschaft keine Auswirkung.

Wenn Sie zwei Längen angeben, bestimmt die erste den linken und rechten und die zweite den oberen und unteren Zellenabstand. Geben Sie nur eine Länge an, bezieht sie sich auf alle vier Richtungen.

Obwohl der Initialwert 0 ist, hält sich kaum ein moderner Browser daran. Im Allgemeinen wird ein Zellenabstand von 2 Pixeln dargestellt. Wenn Sie diesen Abstand unterdrücken möchten, müssen Sie explizit border-spacing: 0; deklarieren.

table {
  border-collapse: separate;
  border-spacing: 8px 4px;
  border: 2px solid black;
}
td { border: 1px solid black; }

th { border: 2px solid black; }

Abb. 7.37: Die Eigenschaft border-spacing

Zum Seitenanfang

Rahmen um leere Zellen: Die Eigenschaft empty-cells

Die Eigenschaft empty-cells gibt beim Tabellenmodell der getrennten Rahmen an, ob leere Zellen dargestellt werden sollen oder nicht. Leer sind Zellen, die keinen Inhalt haben, deren Eigenschaft visibility auf hidden gesetzt ist oder deren Inhalt durch display: none; unterdrückt wird. Beim Modell mit zusammenfallenden Rahmen hat diese Eigenschaft keine Auswirkung.

Standardmäßig werden leere Zellen dargestellt (show); ihr Rahmen und ihre Hintergrundeigenschaften werden angezeigt.

Beim Wert hide werden leere Zellen nicht dargestellt, das heißt, ihr Rahmen und ihre Hintergrundeigenschaften beeinflussen die Darstellung der Tabelle nicht. Wenn alle Zellen einer Zeile nicht dargestellt werden, hat die Zeile eine Höhe 0; die Eigenschaft border-spacing bezieht sich darüber hinaus auf nur eine Seite der Zeile.

Zum Seitenanfang

Ausrichtung von Tabellenüberschriften: Die Eigenschaft caption-side

Tabellen generieren eine anonyme, unsichtbare (virtuelle) Box, die sowohl die Box des Tabellencontainers table als auch die Box der Tabellenüberschrift caption enthält. Die Box der Tabellenüberschrift ist eine Blockbox, die wie eine normale Blockbox innerhalb der anonymen Tabellenbox dargestellt wird und alle vererbbaren Eigenschaften der Tabelle übernimmt.

Die Eigenschaft caption-side gibt an, wie die Tabellenüberschrift im Verhältnis zur Tabelle positioniert werden soll.

Wenn Sie top angeben, steht die Tabellenüberschrift über der Tabelle, geben Sie bottom an, steht sie darunter.

In CSS 2.0 gab es die Werte left und right, die jedoch nicht in CSS 2.1 übernommen wurden. Sie werden zwar von einigen Browsern unterstützt, dennoch sollten Sie sie nicht verwenden. CSS 2.1-konforme Browser (und solche, die mit left und right ohnehin noch nie etwas anfangen konnten) ersetzen beide Werte durch den Initialwert top.

Im folgenden Beispiel wird die Tabellenüberschrift unter die Tabelle positioniert (sie stellt damit eher eine Tabellenunterschrift dar). Da die verschiedenen Browser den Abstand zwischen Tabelle und Tabellenüberschrift (sprich: die Margin-Bereiche) unterschiedlich behandeln, wird margin auf 0 gesetzt und der Abstand stattdessen mit padding erzeugt.

table {
  caption-side: bottom;
  border: 2px solid black;
}
td, th {
  border: 1px solid black;
  padding: 2px 5px;
}
th { border: 2px solid black; }

caption {
  margin: 0;
  padding: 1em 0;
  text-align: center;
}