<col> HTML-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 schließt die globalen Attribute ein.

span

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

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier nur zu Referenzzwecken bei der Aktualisierung vorhandenen Codes und aus historischem Interesse dokumentiert.

align

Gibt die horizontale Ausrichtung jeder Spaltenzelle an. Die möglichen Aufzählungswerte sind left, center, right, justify und char. Wenn char unterstützt wird, richtet dieser Wert den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, sowie am Offset, das durch das charoff-Attribut definiert ist. Beachten Sie, dass dieses Attribut die im <colgroup>-Elternelement angegebene align überschreibt. Verwenden Sie stattdessen die text-align CSS-Eigenschaft in den <td>- und <th>-Elementen, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von text-align auf das <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 rechts auszurichten.

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

bgcolor

Definiert die Hintergrundfarbe jeder Spaltenzelle. Der Wert ist eine HTML-Farbe, entweder ein 6-stelliges hexadezimales RGB mit #-Präfix oder ein Farb-Schlüsselwort. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie die background-color-CSS-Eigenschaft, da dieses Attribut veraltet ist.

char

Hat keine Wirkung. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Spaltenzelle festzulegen. Typische Werte dafür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, es überschreibt jedoch weiterhin das im <colgroup>-Elternelement angegebene char.

charoff

Hat keine Wirkung. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalts der Spaltenzelle vom in char angegebenen Ausrichtungszeichen versetzt wird.

valign

Gibt die vertikale Ausrichtung jeder Spaltenzelle an. Die möglichen Aufzählungswerte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die im <colgroup>-Elternelement angegebene valign überschreibt. Verwenden Sie die vertical-align-CSS-Eigenschaft in den <td>- und <th>-Elementen, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von vertical-align auf das <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] erreicht werden, obwohl dies nicht trivial ist.

width

Gibt eine Standardbreite für jede Spalte an. Neben den Standard-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 zu halten. Es können auch relative Breiten wie 5* verwendet werden. Beachten Sie, dass dieses Attribut die im <colgroup>-Elternelement angegebene width überschreibt. Verwenden Sie 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 die Spalten nicht strukturell. Dies ist die Aufgabe 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 dem Tisch und den Spaltengruppen (<colgroup>), aber hinter den auf die Zeilengruppen (<thead>, <tbody>, und <tfoot>) sowie den Zeilen (<tr>) und den einzelnen Zellen (<th> und <td>) angewandten Hintergrundfarben aufgetragen wird, sind auf Spalten angewendete Hintergründe nur sichtbar, wenn jede darüber gestrichene Schicht einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften gelten, jedoch nur, wenn das <table> border-collapse: collapse gesetzt hat.
  • visibility: Der Wert collapse für eine Spalte bewirkt, dass alle Zellen dieser Spalte nicht gerendert und in andere Spalten reichende Zellen abgeschnitten werden. Der Platz, den diese Spalten belegt hätten, wird entfernt. Die Größe anderer Spalten wird jedoch weiterhin berechnet, als ob die Zellen in den zusammengebrochenen Spalten vorhanden wären. Andere Werte für visibility haben keine Wirkung.
  • width: Die width-Eigenschaft definiert eine Mindestbreite für die Spalte, so als wäre min-width gesetzt.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige 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. Innerhalb des <colgroup> sind drei <col>-Elemente enthalten, die drei stilbare Spalten erstellen. Das span-Attribut gibt an, wie viele Tabellenspalten jedes <col> umfassen soll (Standardwert 1, wenn weggelassen), und erlaubt es, Attribute auf die Spalten in jedem <col> zu übertragen.

<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 anstelle von veralteten HTML-Attributen, um den Spalten eine Hintergrundfarbe zu geben 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, um die Hintergrundfarbe jeder Spaltenzelle festzulegen
• border: CSS-Eigenschaft, um die Rahmen von Spaltenzellen zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Spaltenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Spaltenzelle vertikal auszurichten
• visibility: CSS-Eigenschaft, um die Zellen einer Spalte zu verbergen
• width: CSS-Eigenschaft, um die Standardbreite für jede Spalte zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Spaltenzellen auszuwählen