html css php mysql javascript
Bild zum Thema

Tag <colgroup>

Definition

Status: Aktueller Standard

Das Tag <colgroup> steht für culumn-group (Spalten-Gruppe).
Das HTML-Element <colgroup> dient dazu, Spalten innerhalb einer Tabelle logisch zu gruppieren und gemeinsam zu formatieren. Während das <col>-Tag einzelne Spalten anspricht, agiert <colgroup> als deren Container oder kann selbst eine Gruppe von Spalten definieren.. Es dient primär dem Styling und der Strukturierung. Es muss direkt nach dem öffnenden <table>-Tag (und ggf. nach <caption>), aber vor <thead> oder <tr> eigefügt sein.

Syntax

<colgroup>...</colgroup>

Attribute

span
Gibt an, über wie viele aufeinanderfolgende Spalten sich die Eigenschaften erstrecken sollen (Standard ist 1)
style
Definition der Spalten im CSS-Format

Beispiele

= Tag
= Attribut
= Wert
Text
= Kommentar bzw. wichtig!
Beispiel colgroup
Der Code:
<table border="1" style="border-collapse: collapse; width: 100%;">
  <colgroup>
    <!-- Spalte 1: Blau -->
    <col style="background-color: lightblue;">
    <!-- Spalte 2: Gelb -->
    <col style="background-color: lightyellow;">
    <!-- Spalte 3: Grün -->
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <td>Zelle 1.1</td>
    <td>Zelle 1.2</td>
    <td>Zelle 1.3</td>
  </tr>
  <tr>
    <td>Zelle 2.1</td>
    <td>Zelle 2.2</td>
    <td>Zelle 2.3</td>
  </tr>
</table>
Ergebnis:
Ergebnis: <colgroup>-Demo 1
Hier definieren wir mit dem Tag <col> jede Spalte einzeln.
Beispiel colgroup
Der Code:
<table border="1" style="border-collapse: collapse; width: 100%;">
  <!-- Formatiert 3 Spalten gleichzeitig grau -->
  <colgroup span="3" style="background-color: lightgrey; border: 2px solid orange;"></colgroup>
  
  <tr>
    <td>Zelle 1.1</td>
    <td>Zelle 1.2</td>
    <td>Zelle 1.3</td>
  </tr>
  <tr>
    <td>Zelle 2.1</td>
    <td>Zelle 2.2</td>
    <td>Zelle 2.3</td>
  </tr>
</table>
Ergebnis:
Ergebnis: <colgroup>-Demo 2
Hier verzichten wir auf <col> und definieren alles einheitlich im <colgroup>-Tag

Anmerkungen

In den Beispielen findet ihr die Zeile: 'table border="1"'. Diese Angabe ist obsolet und soll nicht mehr verwendet werden. Für die Vereinfachung der Beispiele habe ich mich jedoch hierfür entschieden.