<col>: Das Table Column Element

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

span

Gibt die Anzahl der aufeinander folgenden Spalten an, die das <col>-Element überspannt. Der Wert muss eine positive ganze Zahl 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 werden nachfolgend zur Bezugnahme beim Aktualisieren vorhandenen Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Spaltenzelle an. Die möglichen enumuerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt an dem durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Versatz aus. Beachten Sie, dass dieses Attribut die im übergeordneten <colgroup>-Element angegebene align-Richtung ü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 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 Veraltet

Definiert die Hintergrundfarbe jeder Spaltenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # beginnt, oder ein Farb-Stichwort. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Hat keine Wirkung. Es war ursprünglich dafür vorgesehen, die Ausrichtung des Inhalts an einem Zeichen jeder Spaltenzelle anzugeben. 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 immer noch die im übergeordneten <colgroup>-Element angegebene char-Richtung überschreiben wird.

charoff Veraltet

Hat keine Wirkung. Es war ursprünglich dafür vorgesehen, die Anzahl der Zeichen anzugeben, um die der Inhalt der Spaltenzelle vom durch das char-Attribut angegebenen Ausrichtungszeichen abgesetzt werden soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Spaltenzelle an. Die möglichen enumuerierten Werte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die im übergeordneten <colgroup>-Element angegebene valign-Richtung ü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 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 Veraltet

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 Mindestbreite sein soll, die nötig ist, um den Inhalt der Spalte zu halten. Auch relative Breiten wie 5* können verwendet werden. Beachten Sie, dass dieses Attribut die im übergeordneten <colgroup>-Element angegebene width-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 keine Spalten zu einer strukturellen Einheit zusammen. Diese Rolle übernimmt das <colgroup>-Element.
• Nur eine begrenzte Anzahl von CSS-Eigenschaften wirkt auf <col>:
  • background : Die verschiedenen background-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spalte. Da die Hintergrundfarbe der Spalten über der Tabelle und den Spaltengruppen (<colgroup>) gemalt wird, jedoch hinter den Hintergrundfarben der Zeilengruppen (<thead>, <tbody>, und <tfoot>), den Zeilen (<tr>) und den einzelnen Zellen (<th> und <td>), sind die auf Tabellenspalten angewendeten Hintergründe nur sichtbar, wenn jede darüber liegende Ebene einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften sind anwendbar, jedoch nur, wenn die <table> border-collapse: collapse gesetzt hat.
  • visibility: Der Wert collapse bei einer Spalte bewirkt, 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 der anderen Spalten wird jedoch weiterhin so berechnet, als wären die Zellen in der zusammengebrochenen(n) Spalte(n) vorhanden. 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 Praktiken einführt.

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

HTML

Ein <colgroup>-Element bietet Strukturen für eine Grundtabelle und erstellt eine einzige implizite Spaltengruppe. Drei <col>-Elemente sind innerhalb des <colgroup> enthalten, sodass drei stilisierbare Spalten erstellt werden. Das span-Attribut gibt die Anzahl der Tabellenspalten an, die jedes <col> überspannen soll (standardmäßig 1 bei Auslassung), wodurch Attribute über die Spalten in jedem <col> geteilt werden können.

<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 veralteter HTML-Attribute, um den Spalten eine Hintergrundfarbe zu verleihen und den Zelleninhalt 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>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Setzen der Hintergrundfarbe jeder Spaltenzelle
• border: CSS-Eigenschaft zur Steuerung der Umrandung von Spaltenzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Spaltenzelleninhalts
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Spaltenzelleninhalts
• visibility: CSS-Eigenschaft zum Ausblenden von Zellen einer Spalte
• width: CSS-Eigenschaft zur Steuerung der Standardbreite für jede Spalte
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudo-Klassen zur Auswahl der gewünschten Spaltenzellen