<colgroup>: Das Tabellen-Spaltengruppen-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <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>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</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 umfasst die globalen Attribute.

span

Gibt die Anzahl der aufeinanderfolgenden Spalten an, die das <colgroup>-Element überspannt. Der Wert muss eine positive Ganzzahl größer als null sein. Wenn nicht vorhanden, ist der Standardwert 1.

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

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier nur zur Referenz für das Aktualisieren vorhandenen Codes und aus historischem Interesse dokumentiert.

align

Gibt die horizontale Ausrichtung jeder Zelle der Spaltengruppe an. Die möglichen Aufzählungswerte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und der Verschiebung, die durch das charoff-Attribut festgelegt ist. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert durch ihr eigenes align-Attribut überschreiben können. Verwenden Sie stattdessen die text-align CSS-Eigenschaft auf den <td>- und <th>-Elementen, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von text-align auf das <colgroup>-Element hat keine Wirkung, da <td>- und <th>-Elemente keine Nachkommen des <colgroup>-Elements sind und daher nicht davon erben.

Wenn die Tabelle kein colspan-Attribut verwendet, verwenden Sie den td:nth-of-type(an+b) CSS-Selektor für jede Spalte, wobei a die Gesamtanzahl der Spalten in der Tabelle ist und b die Ordnungszahl 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 tatsächlich ein colspan-Attribut verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie [colspan=n] erzielt werden, obwohl dies nicht trivial ist.

bgcolor

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

char

Tut nichts. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen jeder Zelle der Spaltengruppe zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, obwohl es immer noch als Standardwert für das align der <col>-Elemente dient, die Teil dieser Spaltengruppe sind.

charoff

Tut nichts. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, die der Zellinhalt der Spaltengruppe vom durch das char-Attribut angegebenen Ausrichtungszeichen entfernt ist.

valign

Gibt die vertikale Ausrichtung jeder Zelle der Spaltengruppe an. Die möglichen Aufzählungswerte sind baseline, bottom, middle und top. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert durch ihr eigenes valign-Attribut überschreiben können. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft auf den <td>- und <th>-Elementen, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von vertical-align auf das <colgroup>-Element hat keine Wirkung, da <td>- und <th>-Elemente keine Nachkommen des <colgroup>-Elements sind und daher nicht davon erben.

Wenn die Tabelle kein colspan-Attribut verwendet, verwenden Sie den td:nth-of-type() CSS-Selektor für jede Spalte, z. B. td:nth-of-type(2) { vertical-align: middle; } um die Zellen der zweiten Spalte vertikal zu zentrieren.

Wenn die Tabelle tatsächlich ein colspan-Attribut verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie [colspan=n] erzielt werden, obwohl dies nicht trivial ist.

width

Gibt eine Standardbreite für jede Spalte in der aktuellen Spaltengruppe an. Zusätzlich zu den Standardpixel- und Prozentwerten kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder überbrückten Spalte die Mindestbreite sein sollte, die erforderlich ist, um den Inhalt der Spalte zu halten. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert durch ihr eigenes width-Attribut überschreiben können. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

Verwendungshinweise

  • Das <colgroup> sollte innerhalb eines <table> erscheinen, nach jedem <caption>, falls verwendet, aber vor jedem <thead>, <tbody>, <tfoot>, und <tr>.
  • Nur eine begrenzte Anzahl von CSS-Eigenschaften wirkt sich auf <colgroup> aus:
    • background: Die verschiedenen background-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spaltengruppe. Da die Hintergrundfarbe der Spaltengruppe auf 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 gezeichnet wird, sind auf Spaltengruppen angewendete Hintergründe nur sichtbar, wenn jede darüber gezeichnete Schicht einen transparenten Hintergrund hat.
    • border: Die verschiedenen border-Eigenschaften gelten, jedoch nur, wenn das <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 werden, und Zellen, die in andere Spalten reichen, abgeschnitten werden. Der Platz, den diese Spalten in der Spaltengruppe eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch weiterhin berechnet, als ob die Zellen in der zusammengefallenen Spalte(n) in der Spaltengruppe vorhanden sind. Andere Werte für visibility haben keine Wirkung.
    • width: Die width-Eigenschaft definiert eine Mindestbreite für die Spalten innerhalb der Spaltengruppe, als ob min-width gesetzt wäre.

Beispiel

Sehen Sie <table> für ein vollständiges Tabellenschau-Beispiel, das allgemeine Standards und Best Practices einführt.

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 grundlegende Tabelle durch Erstellung von Spaltengruppen zu strukturieren. Die Anzahl der Spalten in jeder Spaltengruppe wird durch das span-Attribut festgelegt.

html
<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <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>
</table>

CSS

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

css
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;
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Keine.
Erlaubter Inhalt Wenn das span-Attribut vorhanden ist: keine.
Wenn das Attribut nicht vorhanden ist: null oder mehr <col> Element
Tag-Auslassung Das Start-Tag kann ausgelassen werden, wenn es ein <col> Element als sein erstes Kind hat und wenn es nicht von einem <colgroup> gefolgt wird, dessen End-Tag ausgelassen wurde.
Das End-Tag kann weggelassen werden, wenn es nicht von einem Leerzeichen oder einem Kommentar gefolgt wird.
Erlaubte Eltern Ein <table>-Element. Das <colgroup> muss nach jedem <caption>-Element erscheinen, aber vor jedem <thead>, <tbody>, <tfoot>, und <tr>-Element.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Kein role erlaubt
DOM-Schnittstelle [`HTMLTableColElement`](/de/docs/Web/API/HTMLTableColElement)

Spezifikationen

Specification
HTML
# the-colgroup-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch