Stil mit {stil}

Okt 2008

HTML-Tags colgroup und col • Tabellenspalten steuern

colgroup und col steuern die Darstellung von Tabellenspalten zuverlässiger als das width-Attribut von Tabellenzellen oder das inzwischen veralterte und hoffentlich schon vergessene „Blinde GIF“.

Das <colgroup>-Tag organisiert die Spalten einer Tabelle. Einfache Tabellen sind zeilenorientiert und ohne colgroup- und col-Elemente können Eigenschaften wie Hintergrundfarben nur Zeilen oder einzelnen Tabellenzellen zugewiesen werden.

Das colgroup-Tag soll vor der ersten Zeile direkt auf das table-Tag folgen und weist die Tabelle als spaltenorientiert aus.

HTML-Tag col ♦ Tabellenspalten ansprechen

Das <col>-Tag weist den einzelnen Spalten einer Tabelle innerhalb eines colgroup-Elements Attribute wie Spaltenbreite oder Hintergrundfarben zu.

Das <col>-Tag kann nur innerhalb eines colgroup-Elements sitzen. Wenn allerdings das span-Attribut des <colgroup>-Tags benutzt wird, kann das <col>-Tag nicht verwendet werden.

Das Tag ist leer und wird mit einem Schrägstrich vor der schließenden Klammer abgeschlossen.

<colgroup>
   <col width="20%" span="2" /><col width="15%" />
</colgroup>
<colgroup style="background: rgb(143,188,143);">
   <col width="15%" /><col width="30%" />
</colgroup>

Attribute für colgroup

span

Das Attribut span bestimmt die Anzahl der Spalten, die zu einer Spaltengruppe gehören. Wenn die Spalten sehr unterschiedlich ausfallen, wird anstelle des span-Attributs im <colgroup>-Tag besser das <col>-Tag benutzt, um die Spalten zu definieren. Wenn Sie span nicht benutzen, können Sie den einzelnen Spalten Werte durch <col>-Tags zuweisen.

width

Das Attribut width legt die Breite einer Spaltengruppe fest.

Attribute für col

span

Das Attribut span setzt die Anzahl der folgenden Spalten, die mit den gleichen Werten dargestellt werden sollen.

width

Das Attribut width steuert die vertikale Breite der Spalte.

colgroup: Tabellen formatieren

<table>
   <colgroup>
      <col width="20%" span="2" /><col width="15%" />
   </colgroup>
   <colgroup style="background: rgb(143,188,143);">
      <col width="15%" /><col width="30%" />
   </colgroup>
   <caption> … </caption>
   <tr><th>Erste Spalte Kopfzelle</th>
      <th>Zweite Spalte Kopfzelle</th>
      <th>Dritte Spalte Kopfzelle</th>
      <th>Vierte Spalte Kopfzelle</th>
      <th>Fünfte Spalte Kopfzelle</th></tr>
   <tr> … </tr>
</table>

Darstellung von Tabellen

Tabelle mit Spaltengruppen: Die Spaltenbreiten dieser Tabelle werden durch <colgroup>- und <col>-Tags bestimmt und zusätzliche style-Attribute bestimmen die Darstellung der Tabellenspalten. Die Breite der Tabellenspalten kann nicht nur in Prozentwerten, sondern auch in absoluten Werten – z.B. 230px – angegeben werden. Die Breite von Tabellenspalten kann nicht nur über das width-Attribut sondern auch mit CSS-Klassen oder einem style-Attribut festgesetzt werden.

Bemerkung: Neben der Festlegung der Spaltenbreite werden <colgroup>- und <col>-Tags als Träger für CSS-Eigenschaften benutzt, um die Spalten einer Tabelle visuell zu gestalten.

Alle modernen Browser stellen Spaltenbreiten sowohl bei Prozent- als auch bei absoluten Breitenangaben korrekt dar. Stile wie background für Tabellenspalten werden unterstützt, weitere Stile aber nur unzuverlässig.

Das Attribut span wird von allen Browsern zuverlässig unterstützt.

Zum Seitenanfang