Was in einer Tabelle steckt

Die Gruppierung von Spalten oder Reihen

Browser bauen Tabellen nach einem Algorithmus auf. Zunächst werden die Spalten und danach die Reihen ermittelt:

1. Mit dem colgroup- und col-Elementen können Spaltengruppen und Spalten für eine Tabelle angegeben werden. Fehlen diese Elemente, werden Browser die Spalten aus den Zellen der Tabelle ableiten. Der Browser baut auf diese Weise das Spaltenraster auf und ordnet die Spalten gegebenenfalls einer Spaltengruppe zu.
2. Tabellenreihen (tr-Elemente) können in Kopf-, Rumpf- und Fussbereiche gruppiert werden. Auch diese Elemente dienen dem Browser, das Gitter für eine Tabelle aufzubauen.

Spaltengruppen dürfen sich nicht überschneiden. Das Gleiche gilt für Reihengruppen. Eine Tabellenzelle darf zwar über die Grenze zwischen zwei Spaltengruppen (colgroup-Elemente) gestreckt werden, aber nicht über zwei Reihengruppen (thead-, tbody- oder tfoot-Elemente).

Die colgroup- und col-Elemente

Spalten können Sie entweder mit colgroup-Elementen oder mit colgroup-Elementen in Verbindung mit col-Elementen definieren. Die Spalten haben keinen Einfluss auf die Zugänglichkeit in Screenreadern.

Das colgroup-Element

Das colgroup-Element definiert eine Spaltengruppe innerhalb einer Datentabelle. Das Element besitzt keine Rolle und darf keine bekommen. Das Element dient zunächst dem Aufbau der Tabelle durch den Browser. Außerdem können mit diesem Element bestimmte CSS-Eigenschaften spaltenweise zu Tabellenzellen zugewiesen werden.

Ein colgroup-Element kann entweder col-Elemente für einzelne Spalten enthalten oder über ein span-Attribut angeben, wie viele Spalten die Spaltengruppe umfasst. Das span-Attribut legt die Zahl der Spalten fest. Der Wert des span-Attributs muss eine ganze Zahl größer als null sein. Ein Wert von 0 oder ein ungültiger Wert wird dabei auf 1 gesetzt. Werte über 1000 werden auf 1000 zurückgesetzt.

Im folgenden beispiel werden insgesamt 7 Spalten durch die beiden colgroup-Elemente definiert:

Das col-Element

Das col-Element definiert eine oder mehrere Spalten innerhalb einer Spaltengruppe, die durch ein colgroup-Element dargestellt wird. Das col-Element ist nur als Kindelement eines colgroup-Elements ohne span-Attribut zulässig. Die col-Elemente dienen wie das colgroup-Element auch dazu, Formatierungen zu Zellen in einer oder mehreren Spalten zuzuweisen. Auch das col-Element besitzt keine Rolle. Das col-Element kann mit einem span-Attribut ebenfalls mehrere Spalten definieren. Eine Besonderheit des col-Elements ist, dass es kein schließenden Tag haben darf.

Im folgenden Beispiel werden 8 Spalten definiert:

Stileigenschaften für Spalten und Spaltengruppen

Es sind nur bestimmte CSS-Eigenschaften, die mit einem colgroup- oder col-Element auf die Zellen der Spalten zugewiesen werden können:

• width: Die width-Eigenschaft legt eine Mindestbreite für die Tabellenzellen innerhalb der Spalte beziehungsweise Spaltengruppe fest.
• visibility: Mit dem Wert collapse für diese Eigenschaft werden die zugehörigen Spalten beziehungsweise Spaltengruppen ausgeblendet. Die Breite der anderen Spalten wird weiterhin so berechnet, als ob die ausgeblendeten Spalten beziehungsweise Spaltengruppen sichtbar wären. Andere Werte für die visibility-Eigenschaft werden nicht unterstützt.
• border: Es können verschiedene border-Eigenschaften den Zellen einer Spalte oder Spaltengruppe zugewiesen werden, aber nur wenn border-collapse: collapse; für das table-Element festgelegt wurde.
• background: Die verschiedenen background-Eigenschaften legen den Hintergrund für Zellen innerhalb einer Spalte oder Spaltengruppe fest. Die Hintergrundfarben werden nur angezeigt, wenn darüber liegende Elemente (thead-, tbody-, tfoot-, tr-, th- und td-Elemente) eine transparente Hintergrundfarbe haben.

Die thead-, tbody- und tfoot-Elemente

HTML bietet die thead-, tbody- und tfoot-Elemente zur Gruppierung von Tabellenreihen (tr-Elemente). Die thead-, tbody- und tfoot-Elemente besitzen zwar die Rolle "rowgroup", aber eine Unterstützung der Rollen durch Screenreader ist nicht bekannt.

Die thead-, tbody- und tfoot-Elemente dienen dazu, Attribute und Stileigenschaften in Reihengruppen weiterzugeben. Beispielsweise für den Druck auf Papier kann man im CSS angeben, ob die thead- und tfoot-Elemente zu Beginn beziehungsweise zum Ende jeder Seite ausgedruckt werden sollen.

Der HTML-Standard beschreibt die Elemente in etwa wie folgt:

• Das thead-Element repräsentiert die Tabellenreihen einer Tabelle, die als Spaltenköpfe für eine Tabelle dienen. Typischerweise enthalten die Tabellenreihen Kopfzellen. Es darf nur ein thead-Element als erstes Kindelement des table-Elements nach etwaigen caption- und colgroup-Elementen eingesetzt werden. Ein thead-Element könnte wie folgt eingesetzt werden:

  <table>
<thead>
<tr><th> … </th><th> … </th> … </tr>
</thead>
…
</table>

• Das tbody-Element repräsentiert die Tabellenreihen einer Tabelle, die als ein Datenkörper der Tabelle dienen. Es dürfen mehrere tbody-Elemente pro Tabelle vorkommen.

  Hinweis: Browser werden sicherstellen, dass Tabellenreihen (tr-Elemente) in einem tbody-Element stehen und die Tabelle im DOM ergänzen, wenn ein tbody-Element fehlt.

• Das tfoot-Element repräsentiert die Tabellenreihen einer Tabelle, die als Spaltenzusammenfassung dienen. Es darf nur ein tfoot-Element als letztes Kindelement eines table-Elements eingesetzt werden.

  Hinweis: In HTML 4.01 und XHTML ist die Reihenfolge für die Reihengruppen als thead-, tfoot- und dann tbody-Elemente spezifiziert.