<colgroup> HTML-Tabellenspalten-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

Bestimmt die Anzahl aufeinanderfolgender Spalten, die das <colgroup> Element umfasst. Der Wert muss eine positive ganze Zahl größer als null sein. Wenn nicht vorhanden, ist der Standardwert 1.

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

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um beim Aktualisieren von bestehendem Code zu helfen und aus historischem Interesse.

align

Bestimmt die horizontale Ausrichtung jeder Spaltengruppenzelle. Die möglichen Aufzählungswerte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt an dem Zeichen aus, das im char Attribut definiert ist, und mit dem Offset, das vom charoff Attribut definiert wird. Beachten Sie, dass die Nachfahren <col> Elemente diesen Wert mit ihrem eigenen align Attribut überschreiben können. Verwenden Sie stattdessen die CSS-Eigenschaft text-align 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 Nachfahren 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 pro Spalte, wobei a die Gesamtzahl 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 Kombination geeigneter CSS-Attributselektoren wie [colspan=n] erreicht werden, obwohl dies nicht trivial ist.

bgcolor

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

char

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 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 verwendet wird, die Mitglieder dieser Spaltengruppe sind.

charoff

Macht nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen zu bestimmen, um die Zelleninhalte der Spaltengruppe vom Ausrichtungszeichen zu versetzen, das durch das char Attribut angegeben ist.

valign

Bestimmt die vertikale Ausrichtung jeder Spaltengruppenzelle. Die möglichen Aufzählungswerte sind baseline, bottom, middle und top. Beachten Sie, dass die Nachfahren <col> Elemente diesen Wert mit ihrem eigenen valign Attribut überschreiben können. Verwenden Sie stattdessen die CSS-Eigenschaft vertical-align 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 Nachfahren 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 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 Kombination geeigneter CSS-Attributselektoren wie [colspan=n] erreicht werden, obwohl dies nicht trivial ist.

width

Bestimmt eine Standardbreite für jede Spalte in der aktuellen Spaltengruppe. Neben den Standardwerten in Pixeln und Prozent kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder umspannten Spalte die minimale Breite sein soll, die notwendig ist, um den Inhalt der Spalte aufzunehmen. Auch relative Breiten wie 5* können verwendet werden. Beachten Sie, dass die Nachfahren <col> Elemente diesen Wert mit ihrem eigenen width Attribut überschreiben können. Verwenden Sie stattdessen die CSS-Eigenschaft width, da dieses Attribut veraltet ist.

Verwendungshinweise

• Das <colgroup> sollte innerhalb einer <table> erscheinen, nach jedem verwendeten <caption> Element, 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 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>) angewendete Hintergrundfarbe gemalt wird, sind Hintergründe, die auf Tabellenspalten-Gruppen angewendet werden, nur sichtbar, wenn jede Schicht, die darüber gemalt wird, 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 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 weiterhin berechnet, als wären die Zellen in der (den) zusammengebrochenen Spalte(n) in der Spaltengruppe vorhanden. Andere Werte für visibility haben keine Wirkung.
  • width: Die Eigenschaft width 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 allgemeine Standards und bewährte Praktiken einführt.

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

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 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 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 Ü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 Spaltengruppenzelle festzulegen
• border: CSS-Eigenschaft um die Ränder der Spaltengruppenzellen zu steuern
• text-align: CSS-Eigenschaft um den Inhalt jeder Spaltengruppenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft um den Inhalt jeder Spaltengruppenzelle vertikal auszurichten
• visibility: CSS-Eigenschaft um Zellen einer Spaltengruppe ein- oder auszublenden
• width: CSS-Eigenschaft um die Standardbreite jeder Spalte in einer Spaltengruppe zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Spaltenzellen auszuwählen