<col>: Das Tabellen-Spaltenelement

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

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten zur Referenz bei der Aktualisierung vorhandenen Codes und nur aus historischen Gründen dokumentiert.

align Veraltet

Bestimmt die horizontale Ausrichtung jeder Spaltenzelle. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am Zeichen aus, das im char-Attribut festgelegt ist, und an der im charoff-Attribut definierten Versatz. Beachten Sie, dass dieses Attribut die im <colgroup>-Elternelement festgelegte [align]-Spezifizierung ü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-Attribut-Selektoren wie [colspan=n] erzielt 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-Schlüsselwort. 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 vorgesehen, die Ausrichtung des Inhalts auf ein Zeichen jeder Spaltenzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, obwohl es weiterhin die im <colgroup>-Elternelement festgelegte [char]-Spezifizierung überschreibt.

charoff Veraltet

Hat keine Wirkung. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, um die der Inhalt der Spaltenzelle vom im char-Attribut angegebenen Ausrichtungszeichen versetzt werden sollte.

valign Veraltet

Bestimmt die vertikale Ausrichtung jeder Spaltenzelle. Die möglichen enumerierten Werte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die im <colgroup>-Elternelement festgelegte [valign]-Spezifizierung ü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-Attribut-Selektoren 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 Prozentsätze kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder überspannten Spalte die minimal notwendige Breite ist, um den Inhalt der Spalte zu halten. Relative Breiten wie 5* können ebenfalls verwendet werden. Beachten Sie, dass dieses Attribut die im <colgroup>-Elternelement festgelegte [width]-Spezifizierung ü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 besitzt.
• Die <col>-Elemente gruppieren Spalten strukturell nicht zusammen. Dies ist die Aufgabe 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 dem Tisch und den Spaltengruppen (<colgroup>) gemalt wird, aber hinter Hintergrundfarben, die auf Zeilengruppen (<thead>, <tbody> und <tfoot>), die Zeilen (<tr>) und die einzelnen Zellen (<th> und <td>) angewendet werden, werden Hintergründe, die auf Tabellenspalten angewendet werden, nur sichtbar, wenn jede darüber gemalte Ebene einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften gelten, aber nur, wenn das <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, abgeschnitten werden. Der Raum, den diese Spalten eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch weiterhin berechnet, als wären die Zellen in den zusammengebrochenen Spalten 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.

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

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

Ein <colgroup>-Element bietet Strukturen für eine grundlegende Tabelle, indem es eine einzige implizite Spaltengruppe erstellt. Drei <col>-Elemente sind innerhalb des <colgroup> eingeschlossen, wodurch drei stilisierbare Spalten entstehen. Das span-Attribut gibt an, wie viele Tabellenspalten jedes <col> überschreiten soll (standardmäßig 1, wenn es weggelassen wird), was es ermöglicht, Attribute über die Spalten in jedem <col> hinweg gemeinsam zu nutzen.

<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 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

• <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 Grenzen der Spaltenzellen zu steuern
• 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, um Zellen einer Spalte zu verbergen
• width: CSS-Eigenschaft, um die Standardbreite jeder Spalte zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Spaltenzellen auszuwählen