<colgroup>

Zuletzt aktualisiert am 4. Februar 2026

Das <colgroup>-Element definiert eine Gruppe von Spalten innerhalb einer Tabelle. Damit kannst du Styling auf ganze Spalten anwenden, ohne jede einzelne <td> oder <th> formatieren zu müssen. Statt in jeder Zeile style-Attribute auf die dritte Zelle zu setzen, definierst du einmal per <colgroup> und <col>, wie die Spalte aussehen soll.

Grundlagen

Normalerweise stylst du Tabellen zeilenweise mit <tr>. Spaltenweises Styling ist ohne <colgroup> umständlich, weil du jede Zelle in der Spalte einzeln ansprechen müsstest. <colgroup> löst dieses Problem: Es definiert Spaltengruppen, die du per CSS einheitlich formatieren kannst.

• <colgroup> steht direkt nach <caption> (falls vorhanden) und vor <thead>, <tbody> und <tfoot>
• Es enthält <col>-Elemente, die einzelne Spalten oder Spaltenspannen definieren
• Alternativ kann <colgroup> ein span-Attribut haben (dann ohne <col>-Kinder)
• Mehrere <colgroup>-Elemente pro Tabelle sind erlaubt
• Die CSS-Eigenschaften auf <col>/<colgroup> sind begrenzt: background, border, width und visibility funktionieren zuverlässig, andere Eigenschaften wie color oder font-size werden ignoriert
• <colgroup> ändert nichts an der Semantik oder Barrierefreiheit, es ist ein reines Styling-Werkzeug

Syntax

<table>
  <colgroup>
    <col style="background-color: #eef2ff;" />
    <col />
    <col style="background-color: #f0fdf4;" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Produkt</th>
      <th scope="col">Menge</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>2</td>
      <td>1.598 €</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>3</td>
      <td>897 €</td>
    </tr>
  </tbody>
</table>

Attribute

Beispiele

Spalten mit span-Attribut

Wenn du mehrere Spalten einheitlich stylen willst, kannst du das span-Attribut verwenden, statt einzelne <col>-Elemente zu schreiben. Das ist kürzer, aber weniger flexibel.

<table>
  <!-- Erste Spalte: kein Styling -->
  <colgroup span="1"></colgroup>
  <!-- Spalte 2 und 3: gelber Hintergrund -->
  <colgroup span="2"
    style="background-color: #fef3c7;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Mitarbeiter</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>85%</td>
      <td>92%</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>78%</td>
      <td>88%</td>
    </tr>
  </tbody>
</table>

Spaltenbreiten definieren

Eine der nützlichsten Anwendungen: Mit <col> kannst du die Breite einzelner Spalten festlegen. Das ist besonders bei Tabellen mit unterschiedlich breiten Inhalten hilfreich.

<table>
  <colgroup>
    <col style="width: 50%;" />
    <col style="width: 25%;" />
    <col style="width: 25%;" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Beschreibung</th>
      <th scope="col">Status</th>
      <th scope="col">Datum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Neue Landing Page erstellen</td>
      <td>In Arbeit</td>
      <td>15.02.2026</td>
    </tr>
    <tr>
      <td>API-Dokumentation aktualisieren</td>
      <td>Erledigt</td>
      <td>10.02.2026</td>
    </tr>
    <tr>
      <td>Unit Tests schreiben</td>
      <td>Geplant</td>
      <td>20.02.2026</td>
    </tr>
  </tbody>
</table>

Spaltengruppen mit Rahmen

Du kannst verschiedene Spaltengruppen visuell durch Rahmen voneinander trennen. Das ist nützlich bei Vergleichstabellen, in denen logisch zusammengehörige Spalten gruppiert werden.

<table>
  <colgroup>
    <col style="width: 30%;" />
  </colgroup>
  <colgroup span="2"
    style="background: #eef2ff;
      border-left: 3px solid #4338ca;
      border-right: 3px solid #4338ca;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Free</th>
      <th scope="col">Pro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Speicher</td>
      <td>5 GB</td>
      <td>100 GB</td>
    </tr>
    <tr>
      <td>API-Calls</td>
      <td>1.000/Tag</td>
      <td>Unbegrenzt</td>
    </tr>
    <tr>
      <td>Support</td>
      <td>Community</td>
      <td>Priorität</td>
    </tr>
  </tbody>
</table>

Barrierefreiheit

<colgroup> und <col> haben keine direkte Auswirkung auf die Barrierefreiheit. Screenreader ignorieren diese Elemente, weil sie rein visueller Natur sind. Die semantische Struktur einer Tabelle ergibt sich aus <thead>, <tbody>, <th> und den scope-Attributen, nicht aus Spaltengruppen.

Achte darauf, dass du <colgroup> nicht als Ersatz für korrekte Tabellenstruktur verwendest. Eine Tabelle mit schönem Spalten-Styling, aber ohne <th> und scope, ist für Screenreader-Nutzer trotzdem unzugänglich.

Häufige Fehler

CSS-Eigenschaften, die auf col/colgroup nicht wirken: Nur background, border, width und visibility funktionieren auf <col> und <colgroup>. Eigenschaften wie color, font-size, text-align oder padding werden ignoriert. Für diese musst du weiterhin die <td>/<th>-Zellen direkt stylen.

<colgroup> an der falschen Position: <colgroup> muss vor <thead>, <tbody> und <tfoot> stehen. Nur <caption> darf davor kommen. An einer anderen Position ist <colgroup> ungültiges HTML.

span zusammen mit <col>-Kindern: Wenn ein <colgroup> sowohl ein span-Attribut als auch <col>-Kindelemente hat, wird span ignoriert. Entscheide dich für eines: Entweder span für einheitliches Styling oder <col>-Elemente für individuelle Spalten.

Zu viele oder zu wenige Spalten: Die Anzahl der definierten Spalten (Summe aller span-Werte und <col>-Elemente) sollte mit der tatsächlichen Spaltenanzahl der Tabelle übereinstimmen. Überzählige Spalten werden ignoriert, fehlende Spalten erhalten kein Styling.

Browser-Kompatibilität

Das colgroup-Element wird von allen modernen Browsern vollständig unterstützt. Die eingeschränkte CSS-Unterstützung (nur background, border, width, visibility) ist eine Eigenheit der HTML-Spezifikation, kein Browser-Bug.

Email-Kompatibilität

Die Unterstützung von colgroup in Email-Clients ist eingeschränkt. Für E-Mails empfiehlt es sich, Spalten-Styling direkt auf die Zellen zu setzen statt auf colgroup/col.

Verwandte Elemente