Ebenso, wie Sie eine Tabelle horizontal in Tabellenkopf, Tabellenkörperbereiche und Tabellenfuß aufteilen können, können Sie auch Gruppen von Spalten und einzelne Spalten vordefinieren. Der Zweck ist auch in diesem Fall zunächst eine logische Strukturierung, auf die Sie dann mittels CSS Zugriff haben, um beispielsweise einzelne Spaltengruppen oder Spalten zu formatieren.

Beispiel 1

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Beispiel 2

<table>
  <colgroup span="3"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Beispiel 3

<table>
  <colgroup>
     <col>
  </colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Erläuterung

Mit den Elementen colgroup und col können Sie Spaltengruppen bzw. einzelne Spalten einer Tabelle für die spätere Gestaltung oder für den Zugriff mit Scripting vordefinieren. Diese Elemente müssen vor allen Elementen thead, tfoot, tbody oder tr notiert werden!

Mit <colgroup>…</colgroup> markieren Sie eine Spaltengruppe (colgroup = column group = Spaltengruppe). Dabei haben Sie zwei Möglichkeiten:

• Entweder notieren Sie <colgroup> ohne das Attribut span, so wie im obigen Beispiel 1. In diesem Fall notieren Sie zwischen <colgroup> und </colgroup> für jede Spalte, über die sich die Spaltengruppe erstrecken soll, je ein <col>-Tag. Das <col>-Tag ist ein Standalone-Element ohne End-Tag.
• Oder Sie notieren <colgroup> mit dem Attribut span, so wie im obigen Beispiel 2, also beispielsweise <colgroup span="3">. In diesem Fall bleibt der Elementinhalt zwischen <colgroup> und </colgroup> leer. Beim span-Attribut geben Sie die Anzahl der Spalten an, über die sich die Spaltengruppe erstrecken soll.

Im obigen Beispiel 3 sehen Sie eine gemischte Anwendungsform. Die Tabelle hat drei Spalten. Dabei wird die erste Spalte separat vordefiniert, während die Spalten zwei und drei in einer gemeinsamen Spaltengruppe vereint werden. Eine solche Anordnung ist beispielsweise sinnvoll, wenn Sie für die erste Spalte besondere CSS-Formatierungen anwenden wollen, beispielsweise eine andere Hintergrundfarbe oder eine andere Textausrichtung.

Weitere Hinweise

Anders als in HTML4.01 dient das Vordefinieren von Spalten in HTML5 nicht mehr vorrangig Performance-Zwecken beim Rendern von Tabellen. Deshalb ist auch das width-Attribut entfallen, mit dem früher die Spaltenbreiten vordefiniert wurden. Selbstverständlich gehört die Breitenangabe nach wie vor zu den wichtigsten Eigenschaften vordefinierter Spalten. Doch ab HTML5 sollten Sie dafür nur noch die CSS-Eigenschaft width verwenden. Mit CSS bzw. CSS-Eigenschaften sind auch andere geeignete Formatierungen anwendbar, etwa Hintergrundfarben, verstärkte Rahmen, Abstände, Ausrichtungen und andere Eigenschaften. Indem Sie entsprechende CSS-Eigenschaften auf die Elemente wie col und colgroup anwenden, betreffen die Angaben alle Tabellenzellen, die zur entsprechenden Spalte bzw. Spaltengruppe gehören.

Wenn Sie XHTML-Standard-konform für einen XML-Parser arbeiten, müssen Sie daher das col-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <col />.

Referenzinformationen

• Elementreferenz <colgroup>
• Elementreferenz <col>

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.