<colgroup>: Das Table Column Group Element

Probieren Sie es aus

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </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 die globalen 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 Standardwert 1.

Hinweis: Das span-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.

align Veraltet

Gibt die horizontale Ausrichtung jeder Spaltengruppenzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am im char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Versatz aus. Beachten Sie, dass die Nachkommen <col>-Elemente diesen Wert mit ihrem eigenen align-Attribut überschreiben können. Verwenden Sie die text-align CSS-Eigenschaft für die <td>- und <th>-Elemente stattdessen, da dieses Attribut veraltet ist.

Hinweis: Das Festlegen von text-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 kein colspan-Attribut verwendet, verwenden Sie den td:nth-of-type(an+b) CSS-Selektor pro Spalte, wobei a die Gesamtanzahl der Spalten in der Tabelle und b 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 ein colspan-Attribut verwendet, kann der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie [colspan=n] erreicht werden, obwohl dies nicht trivial ist.

bgcolor Veraltet

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

char Veraltet

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. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, obwohl es immer noch als Standardwert für die align der <col>-Elemente verwendet wird, die Mitglieder dieser Spaltengruppe sind.

charoff Veraltet

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

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zelle der Spaltengruppe an. Die möglichen enumerierten Werte sind baseline, bottom, middle und top. Beachten Sie, dass die Nachkommen <col>-Elemente diesen Wert mit ihrem eigenen valign-Attribut überschreiben können. Verwenden Sie die vertical-align CSS-Eigenschaft für die <td>- und <th>-Elemente stattdessen, da dieses Attribut veraltet ist.

Hinweis: Das Festlegen von vertical-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 kein colspan-Attribut verwendet, verwenden Sie den td: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 ein colspan-Attribut verwendet, kann der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie [colspan=n] erreicht werden, obwohl dies nicht trivial ist.

width Veraltet

Gibt eine Standardbreite für jede Spalte in der aktuellen Spaltengruppe an. Neben den Standard-Pixel- und Prozentwerten kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder Spalte die minimale Breite sein sollte, die erforderlich ist, um den Inhalt der Spalte aufzunehmen. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass die Nachkommen <col>-Elemente diesen Wert mit ihrem eigenen width-Attribut überschreiben können. Verwenden Sie die width 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 verschiedenen background-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 verschiedenen border-Eigenschaften gelten, aber nur, wenn die <table> border-collapse: collapse gesetzt hat.
  • visibility: Der Wert collapse 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ür visibility haben keine Wirkung.
  • width: Die width-Eigenschaft definiert eine minimale Breite für die Spalten in der Spaltengruppe, als ob min-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 das span-Attribut festgelegt.

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></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