Das<colgroup>-ElementHTML 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 der aufeinanderfolgenden 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 zulässig, wenn ein oder mehrere<col>-Elemente innerhalb des<colgroup>-Elements vorhanden sind.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier zur Referenz dokumentiert, um bestehenden Code zu aktualisieren und aus historischem Interesse.

alignVeraltet

Gibt die horizontale Ausrichtung jeder Zelle der Spaltengruppe an. Die möglichenenumerierten Werte sindleft,center,right,justify undchar. Wenn unterstützt, richtet derchar-Wert den Textinhalt am Zeichen aus, das imchar-Attribut definiert ist, und am Versatz, der durch dascharoff-Attribut definiert ist. Beachten Sie, dass die nachfolgenden<col>-Elemente diesen Wert mit ihrem eigenenalign-Attribut überschreiben können. Verwenden Sie dietext-align CSS-Eigenschaft auf den<td>- und<th>-Elementen, da dieses Attribut veraltet ist.

Hinweis:Das Setzen vontext-align auf das<colgroup>-Element hat keine Auswirkungen, da<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 Gesamtzahl der Spalten in der Tabelle ist undb die Ordnungsposition der Spalte in der Tabelle, 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, lässt sich der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie[colspan=n] erzielen, 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, der mit einer# gefolgt wird, oder einFarbenschlüsselwort. Andere CSS-<color> Werte werden nicht unterstützt. Verwenden Sie stattdessen diebackground-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

charVeraltet

Hat keine Funktion. Es war ursprünglich dafür gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Zelle der Spaltengruppe anzugeben. Typische Werte dafür sind ein Punkt (.) beim Versuch, Zahlen oder Geldwerte auszurichten. Wennalign nicht aufchar gesetzt ist, wird dieses Attribut ignoriert, wird jedoch dennoch als Standardwert für dasalign der<col>-Elemente verwendet, die Mitglieder dieser Spaltengruppe sind.

charoffVeraltet

Hat keine Funktion. Es war ursprünglich dafür gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Zelle der Spaltengruppe vom Ausrichtungszeichen verschoben werden soll, das imchar-Attribut angegeben ist.

valignVeraltet

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

Hinweis:Das Setzen vonvertical-align auf das<colgroup>-Element hat keine Auswirkungen, da<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, lässt sich der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie[colspan=n] erzielen, obwohl dies nicht trivial ist.

widthVeraltet

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

Anwendungshinweise

• Das<colgroup> sollte innerhalb eines<table>-Elements erscheinen, nach jedem<caption>-Element (falls verwendet), aber vor allen<thead>,<tbody>,<tfoot> und<tr>-Elementen.
• Nur eine begrenzte Anzahl von CSS-Eigenschaften wirkt sich auf<colgroup> aus:
  • background : Die verschiedenenbackground-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spaltengruppe. Da die Hintergrundfarbe der Spaltengruppe über der Tabelle, jedoch hinter Hintergrundfarben angewendet auf die Spalten (<col>), die Zeilengruppen (<thead>,<tbody>, und<tfoot>), die Zeilen (<tr>) und die einzelnen Zellen (<th> und<td>) gemalt wird, sind Hintergrundfarben auf Tabellen-Spaltengruppen nur sichtbar, wenn jede Schicht, die darüber gemalt wird, einen transparenten Hintergrund hat.
  • border: Die verschiedenenborder-Eigenschaften gelten, aber nur, wenn das<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 werden und Zellen, die in andere Spalten hineinreichen, abgeschnitten werden. Der Raum, den diese Spalten in der Spaltengruppe eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch immer noch berechnet, als wären die Zellen in den kollabierten Spalten der Spaltengruppe vorhanden. Andere Werte fürvisibility haben keine Wirkung.
  • width: Diewidth-Eigenschaft definiert eine Mindestbreite für die Spalten innerhalb der Spaltengruppe, als obmin-width gesetzt wäre.

Beispiel

Siehe<table> für ein vollständiges Tabellenbeispiel, das allgemeine Standards und bewährte Praktiken einführt.

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

HTML

Zwei<colgroup>-Elemente werden verwendet, um eine grundlegende Tabelle durch das Erstellen von Spaltengruppen zu strukturieren. Die Anzahl der Spalten in jeder Spaltengruppe wird durch dasspan-Attribut angegeben.

<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 visuell mithilfe von CSS 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 Übersicht

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 Ränder der Spaltengruppenzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Zelle der Spaltengruppe
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Zelle der Spaltengruppe
• visibility: CSS-Eigenschaft, um Zellen einer Spaltengruppe auszublenden (oder anzuzeigen)
• width: CSS-Eigenschaft, um die Standardbreite für jede Spalte in einer Spaltengruppe zu steuern
• :nth-of-type,:first-of-type,:last-of-type: CSS-Pseudoklassen, um die gewünschten Spaltenzellen auszuwählen