Stil mit {stil}

Ein selten erspähtes HTML-Tag ist das <colgroup>-Tag, das die Spalten einer Tabelle direkt anspricht und formatiert.

In der herkömmlichen HTML-Notation ist eine Tabelle zeilenweise organisiert. Mit dem <colgroup>-Tag werden zusätzlich die Spalten der Tabelle angesprochen. Das colgroup-Tag wird hinter das table-Tag und vor die ersten Zeilen gesetzt.

<colgroup> gruppiert Tabellenspalten –; die Anzahl der einbegriffenen Spalten wird durch das “span”-Attribut angegeben. Das “width”-Attribut legt die Breite der Spalte fest, relativ zur Tabellenbreite in Prozent oder absolut in Pixeln. Mit dem HTML-Attribut ‘span’ gilt ein col-Tag für mehrere aufeinander folgenden Spalten.

Auch wenn das Browserfenster verkleinert oder vergrößert wird, behalten Tabellenspalten, deren Breite im col-Tag als %-Werte abgegeben sind, ihre relativen Größen.

<table class="exCol">
   <colgroup>
      <col span="2" width="20%" />
      <col width="15%" style="background: thistle;" />
      <col width="45%" style="background: mistyrose" />
   </colgroup>
   <tr>
      <th> Erste Spalte (20%) <br />Kopfzelle </th>
      <th> Zweite Spalte (20%) <br />Kopfzelle </th>
      <th> Dritte Spalte (15%) <br />Kopfzelle </th>
      <th> Vierte Spalte (45%) <br />Kopfzelle </th>
   </tr>
   <tr>
      <td> Erste Spalte erste Zeile </td>
      <td> Zweite Spalte erste Zeile </td>
      <td> Dritte Spalte erste Zeile </td>
      <td> Vierte Spalte erste Zeile </td>
   </tr>
      …
</table>

Dabei spielt es keine Rolle, ob innerhalb der Tabellenzeilen mehrere Zellen durch das colspan-Attribut des <td>- bzw. <th>-Tags verschmolzen werden:

Tabellen, deren Spaltenbreiten mit <colgroup> und <col /> formatiert werden, bleiben in Form. Nur die Wirkung von CSS-Stilen ist beschränkt. Immerhin funktioniert ‘background’ in allen modernen Browsern, so dass man sich die background-Eigenschaft für alle Zellen einer Spalte sparen kann, wenn Spalten besonders herausgestellt werden sollen.