<colgroup>: Das Tabellen-Spaltengruppen-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 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 Standardwert 1.

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

align Veraltet

Gibt die horizontale Ausrichtung jeder Zelle der Spaltengruppe an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und am Versatz, der durch das charoff-Attribut definiert ist. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert mit ihrem eigenen align-Attribut überschreiben können. Verwenden Sie 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 Auswirkungen, da <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 Gesamtzahl der Spalten in der Tabelle ist und b 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 ein colspan-Attribut verwendet, lässt sich der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie [colspan=n] erzielen, 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, der mit einer # gefolgt wird, oder ein Farbenschlüsselwort. Andere CSS-<color> Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

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

charoff Veraltet

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 im char-Attribut angegeben 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 nachfolgenden <col>-Elemente diesen Wert mit ihrem eigenen valign-Attribut überschreiben können. Verwenden Sie 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 Auswirkungen, da <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, lässt sich der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie [colspan=n] erzielen, obwohl dies nicht trivial ist.

width Veraltet

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 überspannten Spalte die minimale Breite sein sollte, die notwendig 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 mit ihrem eigenen width-Attribut überschreiben können. Verwenden Sie stattdessen die width 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 verschiedenen background-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 verschiedenen border-Eigenschaften gelten, aber 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 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ü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

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 das span-Attribut angegeben.

<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 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