<col>: Das Tabellen-Spalten-Element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <col> HTML Element definiert eine oder mehrere Spalten in einer Spaltengruppe, die durch das übergeordnete <colgroup> Element dargestellt wird. Das <col> Element ist nur dann gültig als Kind eines <colgroup> Elements, wenn kein span Attribut definiert ist.

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 beinhaltet die globalen Attribute.

span

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

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind unten nur zur Referenz bei der Aktualisierung vorhandenen Codes und aus historischem Interesse dokumentiert.

align

Gibt die horizontale Ausrichtung jeder Spaltenzelle an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt auf das im char Attribut definierte Zeichen und auf den durch das charoff Attribut definierten Versatz aus. Beachten Sie, dass dieses Attribut die festgelegte align des übergeordneten <colgroup> Elements überschreibt. 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 <col> Element hat keinen Effekt, da <col> keine Nachkommen hat und daher keine Elemente von ihm erben können.

Wenn die Tabelle kein colspan Attribut verwendet, verwenden Sie den td:nth-of-type(an+b) CSS-Selektor. Setzen Sie a auf null und b auf die Position der Spalte in der Tabelle, z.B. td:nth-of-type(2) { text-align: right; } um die zweite Spaltenzellen rechtsbündig auszurichten.

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

bgcolor

Definiert die Hintergrundfarbe jeder Spaltenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, vorangestellt mit #, 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

Hat keine Funktion. Ursprünglich gedacht, um die Ausrichtung des Inhalts an einem Zeichen jeder Spaltenzelle auszugeben. Typische Werte hierfür umfassen einen Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, obwohl es dennoch die festgelegte char des übergeordneten <colgroup> Elements überschreibt.

charoff

Hat keine Funktion. Ursprünglich gedacht, um die Anzahl der Zeichen zu definieren, um die der Inhalt der Spaltenzelle vom Ausrichtungszeichen, angegeben durch das char Attribut, versetzt werden soll.

valign

Gibt die vertikale Ausrichtung jeder Spaltenzelle an. Die möglichen aufgezählten Werte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die festgelegte valign des übergeordneten <colgroup> Elements überschreibt. 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 <col> Element hat keinen Effekt, da <col> keine Nachkommen hat und daher keine Elemente von ihm erben können.

Wenn die Tabelle kein colspan Attribut verwendet, verwenden Sie den td:nth-of-type(an+b) CSS-Selektor. Setzen Sie a auf null und b auf die Position der Spalte in der Tabelle, z.B. td:nth-of-type(2) { vertical-align: middle; } um die zweite Spaltenzellen vertikal in der Mitte auszurichten.

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

width

Gibt eine Standardbreite für jede Spalte an. Neben den Standardpixel- und Prozentwerten kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder überstrichenen Spalte die Mindestbreite sein sollte, die notwendig ist, um den Inhalt der Spalte zu halten. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass dieses Attribut die angegebene width des übergeordneten <colgroup> Elements überschreibt. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

Nutzungshinweise

  • Das <col> Element wird innerhalb eines <colgroup> Elements verwendet, das kein span Attribut hat.
  • Die <col> Elemente gruppieren Spalten nicht strukturell zusammen. Dies ist die Rolle des <colgroup> Elements.
  • Nur eine begrenzte Anzahl von CSS-Eigenschaften wirkt sich auf <col> aus:
    • background : Die verschiedenen background Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spalte. Da die Hintergrundfarbe der Spalte über der Tabelle und den Spaltengruppen (<colgroup>) gemalt wird, aber hinter den Hintergrundfarben, die auf die Zeilengruppen (<thead>, <tbody>, und <tfoot>), die Zeilen (<tr>) und die einzelnen Zellen (<th> und <td>) angewendet werden, sind, sind Hintergrundfarben, die auf Tabellenspalten angewendet werden, nur sichtbar, wenn jede auf ihnen gemalte Ebene einen transparenten Hintergrund hat.
    • border: Die verschiedenen border Eigenschaften gelten, aber nur, wenn das <table> border-collapse: collapse gesetzt hat.
    • visibility: Der Wert collapse für eine Spalte führt dazu, dass alle Zellen dieser Spalte nicht gerendert werden und in andere Spalten übergreifende Zellen abgeschnitten werden. Der Raum, den diese Spalten eingenommen hätten, wird entfernt. Allerdings wird die Größe anderer Spalten immer noch als ob die Zellen in der/die eingestürzte(n) Spalte(n) vorhanden wären, berechnet. Andere Werte für visibility haben keinen Effekt.
    • width: Die width Eigenschaft definiert eine Mindestbreite für die Spalte, als ob min-width gesetzt wäre.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices einführt.

Dieses Beispiel zeigt eine achtspaltige Tabelle, die in drei <col> Elemente unterteilt ist.

HTML

Ein <colgroup> Element bietet Struktur für eine einfache Tabelle, indem es eine einzelne implizite Spaltengruppe erstellt. Drei <col> Elemente sind innerhalb des <colgroup> enthalten, wodurch drei stilisierbare Spalten entstehen. Das span Attribut gibt an, wie viele Tabellenspalten jede <col> überspannen soll (standardmäßig 1, wenn weggelassen), wodurch Attribute über die Spalten in jeder <col> geteilt werden können.

html
<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </colgroup>
  <tr>
    <th>Period</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <th>a.m.</th>
    <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>
    <th>p.m.</th>
    <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

Wir verwenden CSS anstelle der veralteten HTML-Attribute, um den Spalten eine Hintergrundfarbe zu geben und den Zellinhalt auszurichten:

css
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;
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Keine.
Erlaubter Inhalt Keiner; es ist ein leeres Element.
Tag-Auslassung Muss ein Start-Tag haben und darf keinen End-Tag haben.
Erlaubte Eltern Nur <colgroup>, obwohl es implizit definiert werden kann, da sein Start-Tag nicht obligatorisch ist. Das <colgroup> darf kein span Attribut haben.
Implizierte ARIA Rolle Keine entsprechende Rolle
Erlaubte ARIA Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLTableColElement`](/de/docs/Web/API/HTMLTableColElement)

Spezifikationen

Specification
HTML
# the-col-element

Browser-Kompatibilität

Siehe auch