<col>
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.
- Kategorie
- Tabellen
- Art
- Leeres Element
- Attribute
- 1
- Beispiele
- 3
- Browser
- 5 von 5
- 2 von 5
- Stand
- 04.02.2026
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 (mitspan) mehrere aufeinanderfolgende Spalten - CSS auf
<col>ist begrenzt: Nurbackground,border,widthundvisibilityfunktionieren 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
1 AttributBeispiele
3 BeispieleEin 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>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>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
4 Fehler 01 <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. 02 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. 03 Schließendes Tag verwenden
<col> ist ein Void-Element und hat kein schließendes Tag. <col></col> ist falsch. Verwende <col> oder <col />. 04 Falsche Spaltenanzahl
<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
5 von 5Das col-Element wird von allen modernen Browsern vollständig unterstützt. Die eingeschränkte CSS-Unterstützung ist spezifikationsbedingt und kein Browser-Bug.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
2 von 5Die 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.
-
Apple Mail
Komplett
-
Gmail
Keine
Gmail entfernt col-Elemente komplett. Verwende inline width und background direkt auf td-Zellen.
-
Outlook
Teilweise
Outlook unterstützt col teilweise, aber width wird oft ignoriert. Inline-Styling auf Zellen ist zuverlässiger.
-
Thunderbird
Komplett
-
Yahoo Mail
Keine
Yahoo Mail entfernt col-Elemente. Spalten-Styling muss auf die Zellen direkt angewendet werden.
Newsletter
einmal die Woche, kostenlosNeue 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