<colgroup>: Das Table Column Group Element

Dieses Element enthält die globalen Attribute.

span

Gibt die Anzahl der aufeinander folgenden Spalten an, die das <colgroup>-Element umfasst. Der Wert muss eine positive Ganzzahl 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> vorhanden sind.

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

align Veraltet

Gibt die horizontale Ausrichtung jeder Spaltengruppezelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt auf dem im char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Offset aus. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert mit ihrem eigenen 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 dem <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 Gesamtanzahl der Spalten in der Tabelle und b die ordinale Position der Spalte in der Tabelle ist, z.B. td:nth-of-type(7n+2) { text-align: right; }, um die zweite 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 Veraltet

Definiert die Hintergrundfarbe jeder Spaltengruppezelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, mit # vorangestellt, oder ein Farb-Stichwort. 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 gedacht, um die Ausrichtung des Inhalts an einem Zeichen jeder Spaltengruppezelle anzugeben. 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 das align der <col>-Elemente verwendet wird, die Mitglieder dieser Spaltengruppe sind.

charoff Veraltet

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

valign Veraltet

Gibt die vertikale Ausrichtung jeder Spaltengruppezelle 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 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 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, kann der Effekt durch Kombination 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. Zusätzlich zu den Standardwerten in Pixeln und Prozent kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder überbrückten Spalte die minimale Breite ist, 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 mit ihrem eigenen width-Attribut überschreiben können. Verwenden Sie die width CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

• Das <colgroup> sollte innerhalb einer <table> erscheinen, nach jedem <caption>-Element (falls verwendet), jedoch 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 Reihen (<tr>), und die einzelnen Zellen (<th> und <td>) aufgetragenen Hintergründe gemalt wird, sind Hintergründe, die auf Tabellen-Spaltengruppen angewendet werden, nur sichtbar, wenn jede darüber gemalte 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 werden und Zellen, die in andere Spalten übergreifen, 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 ob die Zellen in der zusammengebrochenen Spalte(n) in der Spaltengruppe vorhanden wären. Andere Werte für visibility haben keine Auswirkungen.
  • width: Die width-Eigenschaft definiert eine Mindestbreite für die Spalten innerhalb der Spaltengruppe, als ob min-width gesetzt wäre.

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Praktiken vorstellt.

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

Zwei <colgroup>-Elemente werden verwendet, um eine grundlegende 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>
  <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>

Gruppierte Spalten können verwendet werden, um die Struktur mit CSS optisch 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

• Lernen: HTML-Tabellen Grundlagen
• <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Spaltengruppezelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Spaltengruppezellen
• text-align: CSS-Eigenschaft, um den Inhalt jeder Spaltengruppezelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Spaltengruppezelle vertikal auszurichten
• visibility: CSS-Eigenschaft, um Zellen einer Spaltengruppe zu verstecken (oder anzuzeigen)
• 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 Spaltenschaltzellen