<col>: Das Table Column Element

Dieses Element beinhaltet 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. Wenn nicht vorhanden, ist der Standardwert 1.

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 Veraltet

Gibt die horizontale Ausrichtung jeder Spaltenzelle an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den textuellen Inhalt an dem durch das char Attribut definierten Zeichen und an dem durch das charoff Attribut definierten Versatz aus. Beachten Sie, dass dieses Attribut die im Eltern-<colgroup>-Element angegebene align Überschreibung ist. Verwenden Sie die text-align CSS-Eigenschaft auf den <td> und <th> Elementen stattdessen, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von text-align auf dem <col>-Element zeigt 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 sechsstelliger Hexadezimal-RGB-Code, mit # vorangestellt, 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 Funktion. Es war ursprünglich dazu gedacht, 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 Eltern-<colgroup>-Element angegebene char Überschreibung ist.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Spaltenzelle von dem Zeichen, das im char Attribut angegeben wurde, auszurichten.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Spaltenzelle an. Die möglichen aufgezählten Werte sind baseline, bottom, middle, und top. Beachten Sie, dass dieses Attribut die im Eltern-<colgroup>-Element angegebene valign Überschreibung ist. Verwenden Sie die vertical-align CSS-Eigenschaft auf den <td> und <th> Elementen stattdessen, da dieses Attribut veraltet ist.

Hinweis: Das Setzen von vertical-align auf dem <col>-Element zeigt 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 zentriert 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.

width Veraltet

Gibt eine Standardbreite für jede Spalte an. Zusätzliche zu den Standard-Pixel- 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. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass dieses Attribut die im Eltern-<colgroup>-Element angegebene width Überschreibung ist. Verwenden Sie die width CSS-Eigenschaft stattdessen, 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 Spaltenhintergrundfarbe über der Tabelle und den Spaltengruppen (<colgroup>) gemalt, aber hinter den Hintergrundfarben, die den Zeilengruppen (<thead>, <tbody>, und <tfoot>), den Zeilen (<tr>), und den einzelnen Zellen (<th> und <td>) aufgetragen werden, gemalt wird, sind Hintergründe, die auf Tabellenspalten angewendet werden, nur sichtbar, wenn jede Schicht, die darüber gemalt wird, einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften gelten, aber nur, wenn der <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, werden abgeschnitten. Der Platz, den diese Spalten eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch immer noch berechnet, als ob die Zellen in der zusammengeklappten 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.

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Praktiken vorstellt.

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

Ein <colgroup>-Element bietet Strukturen zu einer Basistabelle, indem es eine einzige implizite Spaltengruppe erstellt. Drei <col>-Elemente sind innerhalb des <colgroup> enthalten und erstellen drei stilisierbare Spalten. Das span Attribut gibt die Anzahl der Tabellenkolonnen an, die jedes <col> überspannen soll (standardmäßig 1, wenn weggelassen), 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>

Wir verwenden CSS anstelle von veralteten HTML-Attributen, 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

• Lernen: HTML Tabellen
• <caption>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Setzen der Hintergrundfarbe jeder Spaltenzelle
• border: CSS-Eigenschaft zur Steuerung von Rändern der Spaltenzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Spaltenzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Spaltenzelle
• visibility: CSS-Eigenschaft zum Ausblenden von Zellen einer Spalte
• width: CSS-Eigenschaft zur Steuerung der Standardbreite jeder Spalte
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Spaltenzellen