<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>
  <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 enthält die globalen Attribute.

span

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

Hinweis: Das span-Attribut ist nicht zulässig, wenn es ein oder mehrere <col>-Elemente innerhalb des <colgroup> gibt.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind nur als Referenz für die Aktualisierung bestehenden Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Zellengruppe an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt auf das im char-Attribut definierte Zeichen und den 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 stattdessen die text-align CSS-Eigenschaft für die <td>- und <th>-Elemente, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von text-align auf dem <colgroup>-Element hat keine Wirkung, 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 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 rechts auszurichten.

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

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Zellengruppe. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # beginnt, oder ein Farbschlü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 Zellengruppe anzugeben. Typische Werte dafü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

Hat keine Wirkung. Es war ursprünglich dafür gedacht, die Anzahl der Zeichen anzugeben, um die der Zellengruppeninhalt vom im char-Attribut spezifizierten Zeichen aus versetzt werden soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zellengruppe an. Die möglichen aufzählbaren 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 stattdessen die vertical-align CSS-Eigenschaft auf den <td>- und <th>-Elementen, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von vertical-align auf dem <colgroup>-Element hat keine Wirkung, 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, kann der Effekt durch die Kombination geeigneter CSS-Attributselektoren wie [colspan=n] erzielt werden, 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 umspannten Spalte die minimale Breite ist, die notwendig ist, um den Inhalt der Spalte aufzunehmen. Auch relative Breiten wie 5* können verwendet werden. Beachten Sie, dass die Nachkommen-<col>-Elemente diesen Wert mit ihrem eigenen width-Attribut überschreiben können. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

Hinweise zur Verwendung

• Das <colgroup> sollte innerhalb einer <table> erscheinen, nach einem <caption>-Element (falls verwendet), aber vor allen <thead>, <tbody>, <tfoot> und <tr>-Elementen.
• Nur eine begrenzte Anzahl von CSS-Eigenschaften wirken 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 den auf die Spalten (<col>), die Zeilengruppen (<thead>, <tbody>, und <tfoot>), die Zeilen (<tr>), und die einzelnen Zellen (<th> und <td>) angewendet wird, sind Hintergründe, die auf Spaltengruppen von Tabellen angewendet werden, nur sichtbar, wenn jede Schicht, die darauf gemalt wird, einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften gelten, jedoch nur, wenn <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 übergreifende Zellen 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 den zusammengebrochenen Spalten in der Spaltengruppe vorhanden wären. 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 sich <table> für ein vollständiges Tabellenbeispiel an, das gängige Standards und bewährte Verfahren vorstellt.

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

HTML

Zwei <colgroup>-Elemente werden verwendet, um eine Basistabelle durch die Erstellung 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>
  <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:

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: Grundlagen von HTML-Tabellen
• <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zur Festlegung der Hintergrundfarbe jeder Zellengruppe
• border: CSS-Eigenschaft, um die Rahmen der Zellengruppen zu steuern
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Zellengruppe
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Zellengruppe
• visibility: CSS-Eigenschaft, um Zellen einer Zellengruppe auszublenden (oder anzuzeigen)
• width: CSS-Eigenschaft zur Steuerung der Standardbreite jeder Spalte in einer Spaltengruppe
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Spaltenzellen auszuwählen