mitmario.dev

<colgroup>

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.

Steckbrief <colgroup>
Kategorie
Tabellen
Art
Block
Attribute
1
Beispiele
3
Browser
5 von 5
E-Mail
2 von 5
Stand
04.02.2026

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

index.html
Grundsyntax
<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

1 Attribut
Attribut und Beispiel Beschreibung
span Number
span="3"
Gibt an, über wie viele aufeinanderfolgende Spalten sich die colgroup erstreckt. Standard ist 1. Wird ignoriert, wenn col-Kindelemente vorhanden sind.

Beispiele

3 Beispiele

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.

index.html
colgroup mit span
<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>

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

4 Fehler
01 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.
02 <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.
03 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.
04 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

5 von 5

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.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

2 von 5

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.

  • Apple Mail

    Komplett

  • Gmail

    Teilweise

    Gmail entfernt colgroup und col-Elemente. Spalten-Styling muss direkt auf td/th-Zellen gesetzt werden.

  • Outlook

    Teilweise

    Outlook unterstützt colgroup grundlegend, aber width auf col kann ignoriert werden. Inline-width auf Zellen ist zuverlässiger.

  • Thunderbird

    Komplett

  • Yahoo Mail

    Teilweise

    Ähnlich wie Gmail: colgroup wird oft entfernt. Inline-Styling auf Zellen verwenden.

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.