Das<colgroup>-HTML-Element definiert eine Gruppe von Spalten innerhalb einer Tabelle.

Probieren Sie es aus

<table>  <caption>    Superheros and sidekicks  </caption>  <colgroup>    <col />    <col span="2" />    <col span="2" />  </colgroup>  <thead>    <tr>      <td></td>      <th scope="col">Batman</th>      <th scope="col">Robin</th>      <th scope="col">The Flash</th>      <th scope="col">Kid Flash</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">Skill</th>      <td>Smarts, strong</td>      <td>Dex, acrobat</td>      <td>Super speed</td>      <td>Super speed</td>    </tr>  </tbody></table>

.batman {  background-color: #d7d9f2;}.flash {  background-color: #ffe8d4;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}caption {  caption-side: bottom;  padding: 10px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 6px;}td {  text-align: center;}

Attribute

Dieses Element enthält dieglobalen Attribute.

span

Gibt die Anzahl aufeinanderfolgender Spalten an, die das<colgroup>-Element überspannt. Der Wert muss eine positive ganze Zahl größer als Null sein. Wenn nicht vorhanden, ist der Standardwert1.

Hinweis:Dasspan-Attribut ist nicht erlaubt, wenn ein oder mehrere<col>-Elemente innerhalb des<colgroup> vorhanden sind.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind lediglich zu Referenzzwecken für die Aktualisierung vorhandenen Codes und für historisches Interesse dokumentiert.

alignVeraltet

Gibt die horizontale Ausrichtung jeder Spaltengruppenzelle an. Die möglichenenumerierten Werte sindleft,center,right,justify undchar. Wenn unterstützt, richtet derchar-Wert den Textinhalt am imchar-Attribut definierten Zeichen und dem imcharoff-Attribut definierten Versatz aus. Beachten Sie, dass die Nachkommen<col>-Elemente diesen Wert mit ihrem eigenenalign-Attribut überschreiben können. Verwenden Sie dietext-align CSS-Eigenschaft für die<td>- und<th>-Elemente stattdessen, da dieses Attribut veraltet ist.

Hinweis:Das Festlegen vontext-align auf dem<colgroup>-Element hat keine Wirkung, da die<td>- und<th>-Elemente keine Nachkommen des<colgroup>-Elements sind und daher nicht von ihm erben.

Wenn die Tabelle keincolspan-Attribut verwendet, verwenden Sie dentd:nth-of-type(an+b) CSS-Selektor pro Spalte, wobeia die Gesamtanzahl der Spalten in der Tabelle undb die Ordnungsposition der Spalte in der Tabelle ist, z.B.td:nth-of-type(7n+2) { text-align: right; }, um die Zellen der zweiten Spalte rechtsbündig auszurichten.

Wenn die Tabelle eincolspan-Attribut verwendet, kann der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie[colspan=n] erreicht werden, obwohl dies nicht trivial ist.

bgcolorVeraltet

Definiert die Hintergrundfarbe jeder Zelle der Spaltengruppe. Der Wert ist eine HTML-Farbe; entweder ein6-stelliger hexadezimaler RGB-Code, vorangestellt mit einem#, oder einFarbenschlüsselwort. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie diebackground-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

charVeraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Spaltengruppenzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wennalign nicht aufchar gesetzt ist, wird dieses Attribut ignoriert, obwohl es immer noch als Standardwert für diealign der<col>-Elemente verwendet wird, die Mitglieder dieser Spaltengruppe sind.

charoffVeraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Anzahl von Zeichen anzugeben, um die der Inhalt der Spaltengruppenzelle vom imchar-Attribut angegebenen Ausrichtungszeichen versetzt ist.

valignVeraltet

Gibt die vertikale Ausrichtung jeder Zelle der Spaltengruppe an. Die möglichenenumerierten Werte sindbaseline,bottom,middle undtop. Beachten Sie, dass die Nachkommen<col>-Elemente diesen Wert mit ihrem eigenenvalign-Attribut überschreiben können. Verwenden Sie dievertical-align CSS-Eigenschaft für die<td>- und<th>-Elemente stattdessen, da dieses Attribut veraltet ist.

Hinweis:Das Festlegen vonvertical-align auf dem<colgroup>-Element hat keine Wirkung, da die<td>- und<th>-Elemente keine Nachkommen des<colgroup>-Elements sind und daher nicht von ihm erben.

Wenn die Tabelle keincolspan-Attribut verwendet, verwenden Sie dentd:nth-of-type() CSS-Selektor pro Spalte, z.B.td:nth-of-type(2) { vertical-align: middle; }, um die Zellen der zweiten Spalte vertikal zu zentrieren.

Wenn die Tabelle eincolspan-Attribut verwendet, kann der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie[colspan=n] erreicht werden, obwohl dies nicht trivial ist.

widthVeraltet

Gibt eine Standardbreite für jede Spalte in der aktuellen Spaltengruppe an. Neben den Standard-Pixel- und Prozentwerten kann dieses Attribut die spezielle Form0* annehmen, was bedeutet, dass die Breite jeder Spalte die minimale Breite sein sollte, die erforderlich ist, um den Inhalt der Spalte aufzunehmen. Relative Breiten wie5* können ebenfalls verwendet werden. Beachten Sie, dass die Nachkommen<col>-Elemente diesen Wert mit ihrem eigenenwidth-Attribut überschreiben können. Verwenden Sie diewidth CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

Verwendungshinweise

• Das<colgroup> sollte innerhalb eines<table> erscheinen, nach jedem<caption>-Element (falls verwendet), aber vor jedem<thead>,<tbody>,<tfoot> und<tr>-Element.
• Nur eine begrenzte Anzahl von CSS-Eigenschaften beeinflusst<colgroup>:
  • background: Die verschiedenenbackground-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spaltengruppe. Da die Hintergrundfarbe der Spaltengruppe über der Tabelle, aber hinter den auf die Spalten (<col>), die Zeilengruppen (<thead>,<tbody>, und<tfoot>), die Zeilen (<tr>), und die einzelnen Zellen (<th> und<td>) angewendeten Hintergrundfarben gemalt wird, sind auf Tabellenspalten angewendete Hintergründe nur sichtbar, wenn jede darüber liegende Ebene einen transparenten Hintergrund hat.
  • border: Die verschiedenenborder-Eigenschaften gelten, aber nur, wenn die<table>border-collapse: collapse gesetzt hat.
  • visibility: Der Wertcollapse für eine Spaltengruppe führt dazu, dass alle Zellen der Spalten in dieser Spaltengruppe nicht gerendert und in andere Spalten hineinreichende Zellen abgeschnitten werden. Der Raum, den diese Spalten in der Spaltengruppe eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch weiterhin so berechnet, als wären die Zellen in der zusammengebrochenen Spalte(n) in der Spaltengruppe vorhanden. Andere Werte fürvisibility haben keine Wirkung.
  • width: Diewidth-Eigenschaft definiert eine minimale Breite für die Spalten in der Spaltengruppe, als obmin-width gesetzt wäre.

Beispiel

Siehe<table> für ein vollständiges Tabellenbeispiel mit Einführung in die gängigen Standards und besten Praktiken.

Dieses Beispiel zeigt eine Tabelle mit sieben Spalten, die in zwei<colgroup>-Elemente unterteilt ist, die mehrere Spalten überspannen.

HTML

Zwei<colgroup>-Elemente werden verwendet, um eine einfache Tabelle durch die Erstellung von Spaltengruppen zu strukturieren. Die Anzahl der Spalten in jeder Spaltengruppe wird durch dasspan-Attribut festgelegt.

<table>  <caption>    Personal weekly activities  </caption>  <colgroup span="5"></colgroup>  <colgroup span="2"></colgroup>  <thead>    <tr>      <th>Mon</th>      <th>Tue</th>      <th>Wed</th>      <th>Thu</th>      <th>Fri</th>      <th>Sat</th>      <th>Sun</th>    </tr>  </thead>  <tbody>    <tr>      <td>Clean room</td>      <td>Football training</td>      <td>Dance Course</td>      <td>History Class</td>      <td>Buy drinks</td>      <td>Study hour</td>      <td>Free time</td>    </tr>    <tr>      <td>Yoga</td>      <td>Chess Club</td>      <td>Meet friends</td>      <td>Gymnastics</td>      <td>Birthday party</td>      <td>Fishing trip</td>      <td>Free time</td>    </tr>  </tbody></table>

CSS

Gruppierte Spalten können verwendet werden, um die Struktur mit CSS visuell hervorzuheben:

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);}caption {  caption-side: bottom;  padding: 10px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 6px;  text-align: center;}.weekdays {  background-color: #d7d9f2;}.weekend {  background-color: #ffe8d4;}

table {  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: HTML-Tabellen-Grundlagen
• <caption>,<col>,<table>,<tbody>,<td>,<tfoot>,<th>,<thead>,<tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zelle der Spaltengruppe festzulegen
• border: CSS-Eigenschaft zur Steuerung der Rahmen von Spaltengruppenzellen
• text-align: CSS-Eigenschaft zum horizontalen Ausrichten des Inhalts jeder Zelle der Spaltengruppe
• vertical-align: CSS-Eigenschaft zum vertikalen Ausrichten des Inhalts jeder Zelle der Spaltengruppe
• visibility: CSS-Eigenschaft zum Ausblenden (oder Anzeigen) von Zellen einer Spaltengruppe
• width: CSS-Eigenschaft zur Steuerung der Standardbreite für jede Spalte in einer Spaltengruppe
• :nth-of-type,:first-of-type,:last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Spaltenzellen