<col>: Das Table Column-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 ihr übergeordnetes <colgroup>-Element repräsentiert wird. Das <col>-Element ist nur gültig als Kind eines <colgroup>-Elements, das kein span-Attribut definiert hat.

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 an, wie viele aufeinanderfolgende Spalten das <col>-Element umfasst. Der Wert muss eine positive Ganzzahl größer als null sein. Wenn es nicht vorhanden ist, beträgt der Standardwert 1.

Veraltete Attribute

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

align

Gibt die horizontale Ausrichtung jeder Spaltenzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den textuellen Inhalt an dem im char-Attribut definierten Zeichen und an dem durch das charoff-Attribut definierten Offset aus. Beachten Sie, dass dieses Attribut die im align ihres <colgroup> übergeordneten Elements spezifizierte Ausrichtung überschreibt. Verwenden Sie stattdessen die text-align-CSS-Eigenschaft auf den <td> und <th> Elementen, da dieses Attribut veraltet ist.

Hinweis: Die Einstellung von text-align auf dem <col>-Element hat keine Wirkung, da <col> keine Nachkommen hat und daher keine Elemente von ihm erben.

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 Zellen der zweiten Spalte rechtsbündig auszurichten.

Wenn die Tabelle ein colspan-Attribut verwendet, kann der Effekt 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, mit einem # vorangestellt, oder ein Farbname. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char

Macht nichts. Es war ursprünglich gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Spaltenzelle zu spezifizieren. 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 die im char ihres <colgroup> übergeordneten Elements spezifizierte Ausrichtung überschreiben wird.

charoff

Macht nichts. Es war ursprünglich gedacht, die Anzahl der Zeichen anzugeben, die der Inhalt der Spaltenzelle vom im char-Attribut spezifizierten Ausrichtungszeichen versetzt sein sollte.

valign

Gibt die vertikale Ausrichtung jeder Spaltenzelle an. Die möglichen enumerierten Werte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die im valign ihres <colgroup> übergeordneten Elements spezifizierte Ausrichtung überschreibt. Verwenden Sie stattdessen die vertical-align-CSS-Eigenschaft auf den <td> und <th> Elementen, da dieses Attribut veraltet ist.

Hinweis: Die Einstellung von vertical-align auf dem <col>-Element hat keine Wirkung, da <col> keine Nachkommen hat und daher keine Elemente von ihm erben.

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 Zellen der zweiten Spalte vertikal zu zentrieren.

Wenn die Tabelle ein colspan-Attribut verwendet, kann der Effekt 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. 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 sein sollte, die erforderlich ist, um den Inhalt der Spalte aufzunehmen. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass dieses Attribut die im width ihres <colgroup> übergeordneten Elements spezifizierte Breite überschreibt. Verwenden Sie stattdessen die width-CSS-Eigenschaft, da dieses Attribut veraltet ist.

Verwendungshinweise

  • Das <col>-Element wird innerhalb eines <colgroup> Elements verwendet, das kein span Attribut hat.
  • Die <col>-Elemente gruppieren Spalten nicht strukturell. Dies ist die Rolle des <colgroup>-Elements.
  • Nur eine begrenzte Anzahl von CSS-Eigenschaften beeinflusst <col>:
    • background : Die verschiedenen background-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spalte. Da die Spaltenhintergrundfarbe über der Tabelle und den Spaltengruppen (<colgroup>), aber hinter den auf die Zeilengruppen (<thead>, <tbody>, und <tfoot>), die Zeilen (<tr>), und die einzelnen Zellen (<th> und <td>) angewandten Hintergrundfarben gemalt wird, sind auf Tabellenspalten angewandte Hintergründe nur sichtbar, wenn jede Schicht, die auf ihnen gemalt wird, 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 Zellen, die in andere Spalten ragen, abgeschnitten werden. Der Platz, den diese Spalten eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch weiterhin berechnet, als ob die Zellen in der zusammengebrochenen Spalte(n) vorhanden wären. Andere Werte für visibility haben keine Wirkung.
    • 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 bewährte Verfahren einführt.

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

HTML

Ein <colgroup>-Element strukturiert eine grundlegende Tabelle und erstellt eine einzelne implizite Spaltengruppe. Drei <col>-Elemente sind im <colgroup> enthalten, die drei stilisierbare Spalten erstellen. Das span-Attribut gibt an, wie viele Tabellenspalten jedes <col> umfassen sollte (Standardwert ist 1 falls nicht angegeben), sodass Attribute über die Spalten in jedem <col> hinweg 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.
Zulässiger Inhalt Keine; es ist ein leeres Element.
Tag-Auslassung Muss ein Start-Tag haben und darf keinen End-Tag haben.
Zulässige Eltern Nur <colgroup>, obwohl es implizit definiert werden kann, da sein Start-Tag nicht zwingend erforderlich ist. Das <colgroup> darf kein span Attribut haben.
Implizite 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