<col>: Das Tabellenspalten-Element

Probieren Sie es aus

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
    <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>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts, strong</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </tbody>
</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 enthält 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 verwendet werden. Sie sind hier aus Gründen der Referenzierung beim Aktualisieren bestehender Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Tabellenspalte an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem im char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Versatz aus. Beachten Sie, dass dieses Attribut die für sein <colgroup> übergeordnetes Element angegebene align außer Kraft setzt. 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 das <col>-Element hat keine Wirkung, da <col> keine Nachkommen hat und daher keine Elemente davon erben.

Wenn die Tabelle kein colspan-Attribut verwendet, verwenden Sie den CSS-Selector 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 rechts auszurichten.

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

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Tabellenspalte. Der Wert ist eine HTML-Farbe, entweder ein 6-stelliges hexadezimales RGB-Code, vorangestellt von einem #, oder ein Farbenschlüsselwort. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

char Veraltet

Hat keine Wirkung. Es sollte ursprünglich die Ausrichtung des Inhalts an einem Zeichen jeder Tabellenspalte 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 trotzdem die für sein <colgroup> übergeordnetes Element angegebene char außer Kraft setzt.

charoff Veraltet

Hat keine Wirkung. Es sollte ursprünglich die Anzahl der Zeichen angeben, um den Tabellenspalteninhalt vom im char-Attribut spezifizierten Ausrichtung Zeichen zu versetzen.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Tabellenspalte an. Die möglichen aufzählbaren Werte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die für sein <colgroup> übergeordnetes Element angegebene valign außer Kraft setzt. Verwenden Sie die vertical-align CSS-Eigenschaft auf den <td> und <th> Elementen, da dieses Attribut veraltet ist.

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

Wenn die Tabelle kein colspan-Attribut verwendet, verwenden Sie den CSS-Selector 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 zu zentrieren.

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

width Veraltet

Gibt eine Standardbreite für jede Tabellenspalte an. Zusätzlich zu den Standardpixel- und Prozentwerten kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder überspannten Spalte die minimale Breite sein soll, die notwendig ist, um den Inhalt der Spalte aufzunehmen. Auch relative Breiten wie 5* können verwendet werden. Beachten Sie, dass dieses Attribut die für sein <colgroup> übergeordnetes Element angegebene width außer Kraft setzt. Verwenden Sie die width CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

Hinweise zur Verwendung

• 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 wirken sich auf <col> aus:
  • background: Die verschiedenen background-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spalte. Da die Hintergrundfarbe der Spalte über die Tabelle und die Spaltengruppen (<colgroup>) gemalt wird, aber hinter Hintergrundfarben, die auf die Zeilengruppen (<thead>, <tbody> und <tfoot>), die Zeilen (<tr>) und die einzelnen Zellen (<th> und <td>) angewendet werden, sind die auf Tabellenspalten angewendeten Hintergründe nur sichtbar, wenn jede darauf gemalte Schicht einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften gelten 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 hineinreichen, 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 gelöschten 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 mit allgemeinen Standards und Best Practices.

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

HTML

Ein <colgroup>-Element bietet Strukturen für eine grundlegende Tabelle und erstellt eine einzelne implizite Spaltengruppe. Drei <col>-Elemente sind innerhalb der <colgroup> enthalten und erstellen drei stilisierbare Spalten. Das span-Attribut gibt an, wie viele Tabellenspalten jedes <col> überspannen soll (Standard ist 1 bei Auslassung), wodurch Attribute über die Spalten in jedem <col> hinweg geteilt werden können.

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </colgroup>
  <thead>
    <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>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

CSS

Wir verwenden CSS statt veralteter HTML-Attribute, um eine Hintergrundfarbe für die Spalten bereitzustellen und den Zellinhalt auszurichten:

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <caption>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zur Einstellung der Hintergrundfarbe jeder Tabellenspalte
• border: CSS-Eigenschaft zum Steuern der Ränder von Tabellenspalten
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Tabellenspalte
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Tabellenspalte
• visibility: CSS-Eigenschaft zum Ausblenden der Zellen einer Spalte
• width: CSS-Eigenschaft zur Steuerung der Standardbreite für jede Tabellenspalte
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Tabellenspaltenzellen