HTML/Tabellen/colgroup

Mit colgroup ( = column group = Spaltengruppe) leiten Sie hinter dem einleitenden -Tag eine Vorab-Definition der Tabellenspalten mit dem col-Element ( = column = Spalte) ein.

• 
• 
• 
• 
• 
• 
• 

Wenn Sie dem Browser so gleich zu Beginn der Tabelle mitteilen, wie viele Spalten die Tabelle hat, und wie breit diese sind, kann der Browser die Tabelle schneller aufbauen, d.h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist.

Beachten Sie:
Auch wenn das colgroup-Element von allen Browsern unterstützt wird, gilt dies nur eingeschränkt für alle Attribute von col außer der Breitenangabe mit width. Verwenden Sie lieber CSS.

Beispiel: Beispielschema 1

<table> <colgroup> <col width="80"> <col width="100"> <col width="320"> </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>

Im Beispielschema 1 enthält das <colgroup>-Tag keine weiteren Attribute. Dafür notieren Sie im Anschluss an <colgroup> für jede einzelne gewünschte Tabellenspalte je ein <col>-Tag. Das erste <col>-Tag definiert die erste Spalte, das zweite die zweite Spalte usw.
Wenn Sie keine weiteren Angaben machen, wird die Breite der Spalten automatisch aufgrund des Tabelleninhalts ermittelt. Mit width (Pixel/Prozent) können Sie jedoch eine Spaltenbreite für die einzelnen Spalten vorgeben. Mit width="100" erzwingen Sie beispielsweise eine Spaltenbreite von 100 Pixeln, und mit width=33% eine Breite von einem Drittel der Breite der Gesamttabelle.

einheitliche Spaltenbreite mit span-Attribut

Beispiel: Beispielschema 2

<table> <colgroup width="200" 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>

Im Beispielschema 2 werden keine <col>-Tags notiert. Stattdessen notieren Sie im einleitenden <colgroup>-Tag das Attribut span (span = spannen). Als Wert weisen Sie die Anzahl der Spalten zu, die Sie wünschen. Mit dem Attribut width können Sie in diesem Fall eine einheitliche Spaltenbreite für alle Spalten definieren.

relatives Breitenverhältnis

Bei width haben Sie neben der Möglichkeit, Pixel oder Prozentwerte anzugeben, auch noch eine dritte Möglichkeit: Sie können das relative Breitenverhältnis der Spalten untereinander bestimmen, unabhängig davon, wie breit die Tabelle im Verhältnis zum Anzeigefenster ist. Eine solche Möglichkeit stellt das obige Beispielschema 3 vor. Bei Breitenangaben dieser Art weisen Sie width eine Zahl und dahinter ein Sternzeichen zu. Das Sternzeichen ist dabei nur ein Signalzeichen für den Browser, dass er die Zahlen davor nicht als Pixel interpretieren soll. Wichtig sind die Zahlen.

Beispiel: Beispielschema 3

<table border="1" width="100%"> <colgroup> <col width="4*"> <col width="2*"> <col width="1*"> </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>

Im obigen Beispiel 3 werden drei Spalten definiert, bei denen die relativen Zahlen 4, 2 und 1 in der Summe 7 ergeben. Damit definieren Sie eine Tabelle, bei der die erste Spalte vier Siebtel der Tabellenbreite einnimmt, die zweite Spalte zwei Siebtel, und die dritte Spalte ein Siebtel. Zur Geltung kommt ein relatives Spaltenverhältnis aber erst, wenn Sie außerdem eine Breite für die gesamte Tabelle angeben. Im obigen Beispielschema 3 geschieht das durch die Angabe width="100%" im einleitenden <table>-Tag.

Beachten Sie: <col>-Tags dürfen in HTML kein Abschluss-Tag haben. Das abschließende </colgroup>-Tag ist dagegen optional. In XHTML ist das schließende <col>-Tag aber erforderlich. Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie daher das col-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <col ... />.]]

Auch das <col>-Tag darf das Attribut span erhalten. Dadurch gruppieren Sie jedoch nicht mehrere Spalten zu einer, sondern Sie geben lediglich an, dass Attribute dieser Spalte auch für die nächsten soundsoviel Spalten gelten sollen. Wenn Sie beispielsweise <col span="3" width="100"> notieren, erhalten diese und die nächsten zwei Spalten die Breite von 100 Pixeln.

Das <colgroup>-Tag darf die Attribute span und width auch dann enthalten, wenn unterhalb davon <col>-Tags definiert werden. Dabei überschreibt die Anzahl der definierten <col>-Tags jedoch die Angabe, die mit <colgroup span=> gemacht wurde, und das Attribut width innerhalb eines <col>-Tags hat Vorrang vor der Angabe width im <colgroup>-Tag.

Es ist auch erlaubt, mehrere <colgroup>-Tags zu notieren. So können Sie beispielsweise mit <colgroup width="100" span="3"> und <colgroup width="50" span="5"> hintereinander notiert insgesamt 8 Spalten für die Tabelle definieren, wobei die ersten drei Spalten eine Breite von 100 Pixeln erhalten und die nachfolgenden fünf Spalten eine Breite von 50 Pixeln.

Für die Breite der Tabellenspalten gelten die gleichen Hinweise wie beim Erzwingen von Spaltenbreiten auf herkömmliche Weise.

Weblinks

• W3C: colgroup-element