<col>: Das Tabellenspalten-Element

Dieses Element umfasst 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. Sollte es nicht vorhanden sein, beträgt der Standardwert 1.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um bestehende Codes zu aktualisieren und aus historischen Gründen.

align Veraltet

Gibt die horizontale Ausrichtung jeder Spaltenzelle an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am im char-Attribut definierten Zeichen und am im charoff-Attribut definierten Offset aus. Beachten Sie, dass dieses Attribut die im übergeordneten <colgroup>-Element angegebene align-Zuordnung ü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 das <col>-Element hat keine Wirkung, da <col> keine Nachfolger 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 einfach 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 Farbkeyword. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color-CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts auf ein Zeichen jeder Spaltenzelle zu spezifizieren. Typische Werte hierfür umfassen einen Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, obwohl es dennoch das im übergeordneten <colgroup>-Element angegebene char überschreibt.

charoff Veraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Spaltenzelle vom im char-Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Spaltenzelle an. Die mög<裔®›傳roty】lićtlebottom都 middle, und top. Beachten Sie, dass dieses Attribut die im übergeordneten <colgroup>-Element angegebene [valign`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/colgroup#valign)-Zuordnung ü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 das <col>-Element hat keine Wirkung, da <col> keine Nachfolger 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 einfach ist.

width Veraltet

Gibt eine Standardbreite für jede Spalte 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 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 übergeordneten <colgroup>-Element angegebene width überschreibt. Verwenden Sie stattdessen die width-CSS-Eigenschaft, da dieses Attribut veraltet ist.

• 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 beeinflusst <col>:
  • background: Die verschiedenen background-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spalte. Da die Hintergrundfarbe der Spalte über der Tabelle und den Spaltengruppen (<colgroup>), aber hinter den Hintergrundfarben, die auf die Zeilengruppen (<thead>, <tbody>, und <tfoot>), die Zeilen (<tr>) und die einzelnen Zellen (<th> und <td>) angewandt werden, bemalt wird, sind auf Tabellenspalten angewandte Hintergründe nur dann sichtbar, wenn jede über ihnen bemalte Schicht einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften gelten, jedoch nur, wenn die <table> das 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 immer noch so berechnet, als ob die Zellen in den zusammengebrochenen Spalten präsent 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.

Siehe <table> für ein vollständiges Tabellenbeispiel mit gängigen Standards und Best Practices.

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

Ein <colgroup>-Element bietet Strukturen zu einer Basistabelle und erstellt eine einzelne implizite Spaltengruppe. Drei <col>-Elemente sind innerhalb des <colgroup> enthalten, wodurch drei stilisierbare Spalten erstellt werden. Das span-Attribut gibt die Anzahl der Tabellenspalten an, die jedes <col> umfassen sollte (standardmäßig 1, wenn es weggelassen wird), sodass 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>
  <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>

Wir verwenden CSS anstelle veralteter HTML-Attribute, 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

• <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 Ränder 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 Zellen einer Spalte auszublenden
• 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