<col>

Zuletzt aktualisiert am 4. Februar 2026

Das <col>-Element definiert eine einzelne Spalte (oder eine Spanne von Spalten) innerhalb einer <colgroup>. Es ist ein Void-Element, hat also keinen Inhalt und kein schließendes Tag. Über <col> kannst du CSS-Eigenschaften auf eine ganze Tabellenspalte anwenden, ohne jede Zelle einzeln zu formatieren. Das spart Wiederholungen und macht den Code übersichtlicher.

Grundlagen

<col> arbeitet immer zusammen mit <colgroup>. Während <colgroup> den Container bildet, repräsentiert jedes <col> eine (oder mehrere) Spalten innerhalb dieser Gruppe. Die Reihenfolge der <col>-Elemente entspricht der Reihenfolge der Spalten in der Tabelle.

• <col> ist ein Void-Element: es hat kein schließendes Tag (<col />)
• Es steht ausschließlich innerhalb von <colgroup>
• Jedes <col> repräsentiert eine Spalte oder (mit span) mehrere aufeinanderfolgende Spalten
• CSS auf <col> ist begrenzt: Nur background, border, width und visibility funktionieren zuverlässig
• Die Reihenfolge der <col>-Elemente bestimmt, welche Tabellenspalte sie ansprechen
• Ein <col> ohne Styling dient als Platzhalter, um die richtige Spalte zu adressieren

Syntax

<table>
  <colgroup>
    <col style="width: 40%;" />
    <col style="width: 30%;" />
    <col style="width: 30%; background: #f0fdf4;" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Rolle</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>Entwicklerin</td>
      <td>Aktiv</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>Designer</td>
      <td>Aktiv</td>
    </tr>
  </tbody>
</table>

Attribute

Beispiele

Spalte mit Hintergrundfarbe hervorheben

Ein häufiger Anwendungsfall: Eine bestimmte Spalte farblich hervorheben, um die Aufmerksamkeit darauf zu lenken. Hier wird die Preis-Spalte grün hinterlegt.

<table>
  <colgroup>
    <col />
    <col />
    <col style="background-color: #dcfce7;" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Paket</th>
      <th scope="col">Features</th>
      <th scope="col">Preis/Monat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Starter</td>
      <td>5 Projekte</td>
      <td>9 €</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>Unbegrenzt</td>
      <td>29 €</td>
    </tr>
    <tr>
      <td>Enterprise</td>
      <td>Unbegrenzt + SSO</td>
      <td>99 €</td>
    </tr>
  </tbody>
</table>

span-Attribut für mehrere Spalten

Mit dem span-Attribut kannst du ein einzelnes <col>-Element für mehrere aufeinanderfolgende Spalten verwenden. Das ist kürzer als mehrere identische <col>-Elemente.

<table>
  <colgroup>
    <col style="width: 30%;" />
    <!-- Eine Definition für drei Spalten -->
    <col span="3"
      style="background-color: #eef2ff;" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Sprache</th>
      <th scope="col">2024</th>
      <th scope="col">2025</th>
      <th scope="col">2026</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>TypeScript</td>
      <td>4</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Platzhalter-col ohne Styling

Wenn du nur die dritte Spalte stylen willst, brauchst du trotzdem <col>-Elemente für die ersten beiden als Platzhalter. Ohne Attribute werden sie ignoriert.

<table>
  <colgroup>
    <!-- Platzhalter für Spalte 1 und 2 -->
    <col />
    <col />
    <!-- Nur Spalte 3 wird gestylt -->
    <col style="background: #fef3c7;
      border-left: 2px solid #f59e0b;
      border-right: 2px solid #f59e0b;" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Aufgabe</th>
      <th scope="col">Zuständig</th>
      <th scope="col">Priorität</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bug in Login fixen</td>
      <td>Anna</td>
      <td>Hoch</td>
    </tr>
    <tr>
      <td>Tests schreiben</td>
      <td>Ben</td>
      <td>Mittel</td>
    </tr>
    <tr>
      <td>Doku aktualisieren</td>
      <td>Clara</td>
      <td>Niedrig</td>
    </tr>
  </tbody>
</table>

Barrierefreiheit

<col> hat keine direkte Auswirkung auf die Barrierefreiheit. Screenreader ignorieren es, weil es ein reines Styling-Element ist. Die Barrierefreiheit einer Tabelle hängt von <th>, scope, <thead> und <caption> ab, nicht von Spaltenformatierungen.

Häufige Fehler

<col> ohne explizites <colgroup>: <col> gehört in ein <colgroup>-Element. Wenn du ein <col> direkt in <table> schreibst, erzeugt der HTML-Parser automatisch ein implizites <colgroup>. Das ist also technisch valide. Trotzdem ist ein explizites <colgroup> die bessere Praxis, weil es den Code verständlicher macht.

Nicht unterstützte CSS-Eigenschaften: color, font-size, text-align, padding und die meisten anderen CSS-Eigenschaften funktionieren auf <col> nicht. Nur background, border, width und visibility werden unterstützt. Für alles andere musst du die <td>/<th>-Zellen direkt ansprechen.

Schließendes Tag verwenden: <col> ist ein Void-Element und hat kein schließendes Tag. <col></col> ist falsch. Verwende <col> oder <col />.

Falsche Spaltenanzahl: Wenn du weniger <col>-Elemente definierst als die Tabelle Spalten hat, bleiben die restlichen Spalten ungestylt. Das ist valides HTML, kann aber zu unerwartetem Aussehen führen, wenn du erwartest, dass alle Spalten erfasst sind.

Browser-Kompatibilität

Das col-Element wird von allen modernen Browsern vollständig unterstützt. Die eingeschränkte CSS-Unterstützung ist spezifikationsbedingt und kein Browser-Bug.

Email-Kompatibilität

Die Unterstützung von col in Email-Clients ist eingeschränkt. Viele Clients entfernen col-Elemente beim Rendern. Spalten-Styling sollte in E-Mails direkt auf die Zellen gesetzt werden.

Verwandte Elemente