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.

absolute Breitenangaben

Achtung!

Breitenangaben durch width-Attribute sind in HTML5 nicht mehr möglich. Verwenden Sie entsprechende CSS-Eigenschaften.

Beispiel

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

Das colgroup-Tag enthält keine Attribute. Im Anschluss an <colgroup> notieren Sie für jede einzelne Tabellenspalte 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.

relatives Breitenverhältnis

Achtung!

Breitenangaben durch width-Attribute sind in HTML5 nicht mehr möglich. Verwenden Sie entsprechende CSS-Eigenschaften.

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. 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

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

In diesem Beispiel 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 Siebentel der Tabellenbreite einnimmt, die zweite Spalte zwei Siebentel, und die dritte Spalte ein Siebentel. Zur Geltung kommt ein relatives Spaltenverhältnis aber erst, wenn Sie außerdem eine Breite für die gesamte Tabelle angeben. Hier geschieht das durch die Angabe width="100%" im einleitenden <table>-Tag.

einheitliche Spaltenbreite mit span-Attribut

Achtung!

Breitenangaben durch width-Attribute sind in HTML5 nicht mehr möglich. Verwenden Sie entsprechende CSS-Eigenschaften.

Beispiel

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

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

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-Element darf die Attribute span und width auch dann enthalten, wenn es col-Elemente enthält. Dabei überschreibt die Anzahl der definierten col-Elemente jedoch die Angabe, die im span-Attribut des colgroup-Elements 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-Elemente zu verwenden. 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.

siehe auch

• Referenz: col
• Referenz: colgroup

Weblinks

• W3C: colgroup-element