<colgroup>: Das Table Column Group-Element

Dieses Element umfasst die globalen Attribute.

span

Gibt die Anzahl der aufeinanderfolgenden 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 erlaubt, wenn sich ein oder mehrere <col> Elemente innerhalb des <colgroup> befinden.

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

align Veraltet

Gibt die horizontale Ausrichtung jeder Spaltengruppenzelle an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Offset aus. Beachten Sie, dass die Nachkommen <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 dem <colgroup>-Element hat keinen Effekt, da <td> und <th> Elemente keine Nachkommen des <colgroup>-Elements sind und somit 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 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 erreicht werden, indem geeignete CSS-Attribut-Selektoren wie [colspan=n] kombiniert werden, obwohl dies nicht trivial ist.

bgcolor Veraltet

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

charoff Veraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um welche den Inhalt der Spaltengruppenzelle von dem durch das char-Attribut angegebenen Ausrichtungszeichen verschoben wird.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Spaltengruppenzelle an. Die möglichen aufgezählten Werte sind baseline, bottom, middle und top. Beachten Sie, dass die Nachkommen <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 dem <colgroup>-Element hat keinen Effekt, da <td> und <th> Elemente keine Nachkommen des <colgroup>-Elements sind und somit 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 erreicht werden, indem geeignete CSS-Attribut-Selektoren wie [colspan=n] kombiniert werden, obwohl dies nicht trivial ist.

width Veraltet

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

• Der <colgroup> sollte innerhalb einer <table> erscheinen, nach jedem <caption> Element (falls verwendet), aber vor jedem <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, aber hinter den auf die Spalten (<col>), die Zeilengruppen (<thead>, <tbody>, und <tfoot>), die Zeilen (<tr>), und die einzelnen Zellen (<th> und <td>) aufgebrachten Hintergrundfarben gemalt wird, sind nur dann Hintergrundfarben für Tabellen-Spaltengruppen sichtbar, wenn jede darüber gelegte Ebene einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften werden angewendet, 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 hineinragen, 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 der Spaltengruppe vorhanden sind. Andere Werte von visibility haben keinen Effekt.
  • width: Die width-Eigenschaft definiert eine Mindestbreite für die Spalten innerhalb der Spaltengruppe, als ob min-width gesetzt wäre.

Sehen Sie sich <table> für ein vollständiges Tabellenbeispiel an, das gängige Standards und bewährte Verfahren einführt.

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

Zwei <colgroup>-Elemente werden verwendet, um eine Grundtabelle zu strukturieren, indem Spaltengruppen erstellt werden. 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>

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

• Lernen: Grundlagen von HTML-Tabellen
• <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 Rahmen 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 Spalten-Gruppenzellen zu verstecken (oder zu zeigen)
• 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