<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.

Das <col> HTML Element definiert eine oder mehrere Spalten in einer Spaltengruppe, die durch ihr übergeordnetes <colgroup>-Element dargestellt wird. Das <col>-Element ist nur als Kind eines <colgroup>-Elements gültig, 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 die Anzahl aufeinanderfolgender 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 verwendet werden. Sie werden hier nur zur Referenz aufgeführt, wenn vorhandener Code aktualisiert wird, und aus historischem Interesse.

align

Gibt die horizontale Ausrichtung jeder Spaltenzelle an. Die möglichen enumerated Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char Wert den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und gemäß dem Offset, das durch das charoff-Attribut definiert ist. Beachten Sie, dass dieses Attribut die im übergeordneten <colgroup>-Element festgelegte align-Ausrichtung überschreibt. Verwenden Sie die text-align CSS-Eigenschaft auf den <td>- und <th>-Elementen stattdessen, da dieses Attribut veraltet ist.

Hinweis: Das Einstellen 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 CSS-Selektor td:nth-of-type(an+b). 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, der durch ein # vorangestellt ist, 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

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Spaltenzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Währungswerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, obwohl es immer noch die im übergeordneten <colgroup>-Element festgelegte char-Ausrichtung überschreibt.

charoff

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die Spalteninhaltszelle vom durch das char-Attribut spezifizierten Ausrichtungszeichen zu versetzen.

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 übergeordneten <colgroup>-Element festgelegte valign-Ausrichtung überschreibt. Verwenden Sie die vertical-align CSS-Eigenschaft auf den <td>- und <th>-Elementen stattdessen, da dieses Attribut veraltet ist.

Hinweis: Das Einstellen 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 CSS-Selektor td:nth-of-type(an+b). 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 mittig 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.

width

Gibt eine Standardbreite für jede Spalte 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 Mindestbreite sein soll, 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 übergeordneten <colgroup>-Element festgelegte width-Breite überschreibt. Verwenden Sie die width CSS-Eigenschaft stattdessen, 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 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 die Zellen innerhalb der Spalte. Da die Spaltenhintergrundfarbe über die Tabelle und Spaltengruppen (<colgroup>) gemalt wird, aber hinter den auf die Zeilengruppen (<thead>, <tbody>, und <tfoot>), die Zeilen (<tr>) und die einzelnen Zellen (<th> und <td>) angewendeten Farben, sind die auf Tabellenkolonnen angewendeten Hintergründe nur sichtbar, wenn jede darauf gemalte Ebene einen transparenten Hintergrund hat.
    • border: Die verschiedenen border-Eigenschaften gelten, jedoch nur, wenn die <table> border-collapse: collapse eingestellt hat.
    • visibility: Der Wert collapse für eine Spalte führt dazu, dass alle Zellen dieser Spalte nicht gerendert werden, und Zellen, die sich in andere Spalten erstrecken, abgeschnitten werden. Der Platz, den diese Spalten eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch immer noch berechnet, als ob die Zellen in der/den 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 allgemeine Standards und bewährte Verfahren einführt.

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

HTML

Ein <colgroup>-Element bietet Strukturen für eine einfache Tabelle und erstellt eine einzelne implizite Spaltengruppe. Drei <col>-Elemente sind innerhalb des <colgroup> enthalten und erstellen drei stilisierbare Spalten. Das span-Attribut gibt die Anzahl der Tabellenspalten an, die jedes <col> überspannen sollte (dabei wird standardmäßig 1 angenommen, wenn es weggelassen wird) und ermöglicht es, Attribute über die Spalten in jedem <col> hinweg zu teilen.

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 Keiner; 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 obligatorisch ist. Die <colgroup> muss kein span-Attribut haben.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Zulässige ARIA Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLTableColElement`](/de/docs/Web/API/HTMLTableColElement)

Spezifikationen

Specification
HTML
# the-col-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch