http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Das CSS-Tabellenmodell

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

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.

Werte auto, fixed, inherit
Initialwert auto
Vererbung ja
Anwendung Tabellen

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.

Browserunterstützung

Alle Browser
Leider kann bis heute kein Browser das feste Tabellenlayout richtig interpretieren. Die Spaltenbreiten spielen im Allgemeinen keine Rolle; sie werden unabhängig vom verwendeten Algorithmus ignoriert, sobald Zelleninhalte mehr Platz erfordern, und die Zellen werden auf die erforderliche Breite ausgedehnt. Der verwendete Algorithmus spielt nur dann eine Rolle, wenn der Tabelle selbst eine explizite Breite zugewiesen wird, die auch relativ sein kann. In diesem Fall verbreitern die Zellen sich nicht, auch wenn deren Inhalte mehr Platz benötigen.

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.

Werte separate, collapse, inherit
Initialwert separate
Vererbung ja
Anwendung Tabellen

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.

Browserunterstützung

Die Eigenschaft border-collapse wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6
IE 6 erkennt das CSS-Tabellenmodell nur teilweise. Die Darstellung der Rahmen hängt davon ab, ob die Zellen gefüllt sind oder nicht.
Internet Explorer 7
IE 7 unterscheidet zwischen den Werten collapse und separate, hält sich aber bei zusammenfallenden Rahmen nicht an die geforderten Prioritäten.
Opera
Opera kann Schwierigkeiten mit der korrekten Darstellung dieser Eigenschaft haben, die auch vom Kontext im Webdokument und von anderen Eigenschaften desselben Elements herrühren können.

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.

Werte <Länge> <Länge> bzw. <Länge>, inherit
Initialwert 0
Vererbung ja
Anwendung Tabellen

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

Browserunterstützung

Die Eigenschaft border-spacing wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6 und 7
Der IE bis Version 7 erkennt das CSS-Tabellenmodell nur teilweise und stellt deshalb Rahmen an Tabellenzellen immer gleich dar beziehungsweise abhängig davon, ob die Zellen gefüllt sind oder nicht.

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.

Werte show, hide, inherit
Initialwert show
Vererbung ja
Anwendung Tabellenzellen

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.

Browserunterstützung

Die Eigenschaft empty-cells wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6
Der IE erkennt das CSS-Tabellenmodell nur teilweise und bis Version 6 deshalb auch nicht die Eigenschaft empty-cells. Leere Zellen werden grundsätzlich ohne Rahmen dargestellt (Abhilfe durch &nbsp;), die Eigenschaft empty-cells wird nur dann beachtet, wenn eine ganze Reihe der Tabelle leer ist.
Internet Explorer 7
IE 7 erfüllt den Wert hidden nur, wenn er für alle Zellen einer Tabellenreihe deklariert ist. Ist das nicht der Fall, missachtet er ihn völlig.
Opera
Opera lässt bei der Deklaration des Werts hide den Hintergrund der Tabellenzelle stehen.

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.

Werte top, bottom, inherit
Initialwert top
Vererbung ja
Anwendung Tabellenüberschriften

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;
}

Browserunterstützung

Die Eigenschaft caption-side wird nicht von allen modernen Browsern unterstützt:

Internet Explorer 6 und 7
Der IE bis Version 7 ignoriert diese Eigenschaft völlig beziehungsweise stellt immer den Initialwert dar.
Konqueror
Auch Konqueror ignoriert diese Eigenschaft völlig beziehungsweise stellt immer den Initialwert dar.