<col>: Das Tabellen-Spaltenelement

Dieses Element umfasst die globalen Attribute.

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. Falls nicht vorhanden, beträgt der Standardwert 1.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier nur zur Referenz beim Aktualisieren vorhandenen Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Spaltentabelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char Wert den Textinhalt an dem Zeichen aus, das im char Attribut und dem Offset definiert ist, der durch das charoff Attribut definiert ist. Beachten Sie, dass dieses Attribut die angegebene align des übergeordneten <colgroup> Elements ü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 keinen Effekt, da <col> keine Nachkommen hat und daher keine Elemente von ihm erben.

Wenn die Tabelle kein colspan Attribut verwendet, nutzen 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 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 Veraltet

Definiert die Hintergrundfarbe jeder Spaltentabelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, vorangestellt von einem #, oder ein Farbbegriff. 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 Funktion. Es war ursprünglich gedacht, die Ausrichtung des Inhalts auf ein Zeichen jeder Spaltentabelle anzugeben. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, obwohl es immer noch die spezifizierte char seines übergeordneten <colgroup> Elements überschreibt.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich gedacht, die Anzahl der Zeichen anzugeben, um den Spaltentabelleninhalt von dem im char Attribut spezifizierten Ausrichtungszeichen zu versetzen.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Spaltentabelle an. Die möglichen enumerierten Werte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die angegebene valign des übergeordneten <colgroup> Elements ü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 keinen Effekt, da <col> keine Nachkommen hat und daher keine Elemente von ihm erben.

Wenn die Tabelle kein colspan Attribut verwendet, nutzen 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 zentriert anzuordnen.

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 Veraltet

Gibt eine Standardbreite für jede Spalte an. Zusätzlich zu den Standardwerten für Pixel und Prozent kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder umspannten Spalte die minimale Breite sein sollte, die notwendig ist, um den Inhalt der Spalte aufzunehmen. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass dieses Attribut die angegebene width seines übergeordneten <colgroup> Elements ü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. Dies ist die Rolle des <colgroup> Elements.
• Nur eine begrenzte Anzahl an 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 der Zeilengruppen (<thead>, <tbody>, und <tfoot>), den Zeilen (<tr>), und den einzelnen Zellen (<th> und <td>) liegt, sind auf Spaltentabellen angewendete Hintergründe nur sichtbar, wenn jede Schicht, die darüber gemalt wird, einen transparenten Hintergrund hat.
  • border: Die verschiedenen border Eigenschaften gelten, aber nur, wenn die <table> border-collapse: collapse gesetzt hat.
  • visibility: Der Wert collapse für eine Spalte bedeutet, 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 der anderen Spalten wird jedoch weiterhin berechnet, als ob die Zellen in der eingeklappten Spalte(n) vorhanden sind. Andere Werte für visibility haben keinen Effekt.
  • width: Die width Eigenschaft definiert eine Mindestbreite für die Spalte, als wäre min-width gesetzt.

Sehen Sie <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices einführt.

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

Ein <colgroup> Element bietet Strukturen für eine grundlegende Tabelle und erstellt eine einzige implizite Spaltengruppe. Drei <col> Elemente sind innerhalb des <colgroup> enthalten, was drei stilisierbare Spalten erstellt. Das span Attribut gibt die Anzahl der Tabellenspalten an, die jeder <col> umfassen soll (standardmäßig 1, wenn nicht angegeben), wobei Attribute über die Spalten hinweg 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>

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

• <caption>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS Eigenschaft, um die Hintergrundfarbe jeder Spaltentabelle festzulegen
• border: CSS Eigenschaft zur Steuerung der Rahmen von Spaltentabellen
• text-align: CSS Eigenschaft, um den Inhalt jeder Spaltentabelle horizontal auszurichten
• vertical-align: CSS Eigenschaft, um den Inhalt jeder Spaltentabelle 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 Spaltentabellen auszuwählen