<colgroup>: Das Table Column Group-Element

Dieses Element enthält die globalen Attribute.

span

Gibt die Anzahl aufeinanderfolgender Spalten an, 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 span-Attribute ist nicht zulässig, wenn ein oder mehrere <col>-Elemente innerhalb des <colgroup> vorhanden sind.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier dokumentiert für Referenzzwecke beim Aktualisieren bestehender Codes und aus historischem Interesse.

align Veraltet

Bestimmt die horizontale Ausrichtung jeder Spaltengruppe. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem Zeichen aus, das im char-Attribut und dem Versatz definiert wurde, der durch das charoff-Attribut definiert ist. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert mit ihren eigenen align Attributen überschreiben können. Verwenden Sie stattdessen die text-align CSS-Eigenschaft auf den <td> und <th> Elementen, da dieses Attribut veraltet ist.

Hinweis: Das Festlegen von text-align auf dem <colgroup>-Element hat keinen Effekt, da <td> und <th>-Elemente keine Nachfolger 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 von geeigneten CSS-Attributselektoren wie [colspan=n] erzielt werden, obwohl dies nicht trivial ist.

bgcolor Veraltet

Bestimmt die Hintergrundfarbe jeder Spaltengruppe. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der von einem # eingeleitet wird, oder ein Farb-Schlü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 dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Spaltengruppe zu bestimmen. 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 weiterhin als Standardwert für die align der <col>-Elemente verwendet wird, die Mitglieder dieser Spaltengruppe sind.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen festzulegen, um den Inhalt der Spaltengruppe von dem durch das char-Attribut angegebenen Ausrichtungszeichen zu versetzen.

valign Veraltet

Bestimmt die vertikale Ausrichtung jeder Spaltengruppe. Die möglichen enumerierten Werte sind baseline, bottom, middle und top. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert mit ihren eigenen valign Attributen überschreiben können. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft auf den <td> und <th> Elementen, da dieses Attribut veraltet ist.

Hinweis: Das Festlegen von vertical-align auf dem <colgroup>-Element hat keinen Effekt, da <td> und <th>-Elemente keine Nachfolger 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 von geeigneten 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 Standard-Pixel- und Prozentwerten kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder überspannten Spalte die minimale Breite ist, die erforderlich ist, um den Inhalt der Spalte aufzunehmen. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass die nachfolgenden <col>-Elemente diesen Wert mit ihren eigenen width Attributen überschreiben können. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

• 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 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 Hintergrundfarben, die auf die Spalten (<col>), die Zeilengruppen (<thead>, <tbody>, und <tfoot>), die Zeilen (<tr>), und die einzelnen Zellen (<th> und <td>) angewandt werden, gemalt wird, sind Hintergründe, die auf Tabellenspalten-groups angewandt werden, nur sichtbar, wenn jede Schicht, die über ihnen gemalt wird, einen transparenten Hintergrund aufweist.
  • border: Die verschiedenen border-Eigenschaften gelten, aber nur, wenn die <table> border-collapse: collapse setzt.
  • 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 besetzt hätten, wird entfernt. Allerdings wird die Größe anderer Spalten weiterhin berechnet, als wären die Zellen in der eingeklappten Spalte(n) in der Spaltengruppe vorhanden. Andere Werte für 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 Best Practices 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 grundlegende Tabelle 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 hervorzuheben, indem CSS verwendet wird:

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
• <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Spaltengruppe festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder der Spaltengruppe
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Spaltengruppe
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Spaltengruppe
• visibility: CSS-Eigenschaft, um die Zellen einer Spaltengruppe zu verstecken (oder zu zeigen)
• 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 Spaltenzellen