<col>: Das Tabellenspalten-Element

Probieren Sie es aus

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
    <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>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts, strong</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </tbody>
</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 aufeinanderfolgenden Spalten an, die das <col>-Element umfasst. Der Wert muss eine positive ganze Zahl größer als Null sein. Wenn dieses Attribut nicht vorhanden ist, beträgt der Standardwert 1.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier zur Referenz bei der Aktualisierung vorhandenen Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung der Zellen jeder Spalte an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem im char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Versatz aus. Beachten Sie, dass dieses Attribut die im <colgroup> übergeordneten Element angegebene align ü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 beim <col>-Element hat keine Wirkung, da <col> keine Nachkommen hat und daher keine Elemente davon 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 zweite Spalte rechtsbündig auszurichten.

Wenn die Tabelle ein colspan-Attribut verwendet, kann der Effekt durch Kombinieren geeigneter CSS-Attributselektoren wie [colspan=n] erzielt werden, obwohl dies nicht trivial ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Zellen jeder Spalte. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der durch ein # vorangestellt wird, oder ein Farbwort. 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 dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Spaltenzelle zu spezifizieren. Typische Werte dafür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert, es wird jedoch immer noch das angegebene char seines <colgroup> übergeordneten Elements überschreiben.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, um den Inhalt der Spaltenzelle von dem durch das char-Attribut angegebenen Ausrichtungszeichen zu versetzen.

valign Veraltet

Gibt die vertikale Ausrichtung der Zellen jeder Spalte an. Die möglichen aufzählbaren Werte sind baseline, bottom, middle und top. Beachten Sie, dass dieses Attribut die im <colgroup> übergeordneten Element angegebene valign ü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 beim <col>-Element hat keine Wirkung, da <col> keine Nachkommen hat und daher keine Elemente davon 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 Kombinieren geeigneter CSS-Attributselektoren wie [colspan=n] erzielt werden, obwohl dies nicht trivial ist.

width Veraltet

Gibt eine Standardbreite für jede Spalte an. Neben den Standard-Pixel- und Prozentwerten kann dieses Attribut die spezielle Form 0* annehmen, was bedeutet, dass die Breite jeder umspannten Spalte die minimale Breite sein sollte, die erforderlich 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> übergeordneten Element angegebene width überschreibt. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

Anwendungshinweise

• Das <col>-Element wird innerhalb eines <colgroup>-Elements verwendet, das kein span-Attribut hat.
• Die <col>-Elemente gruppieren die Spalten nicht strukturell. Dies ist die Rolle des <colgroup>-Elements.
• Nur eine begrenzte Anzahl von CSS-Eigenschaften wirkt sich auf <col> aus:
  • background: Die verschiedenen background-Eigenschaften setzen den Hintergrund für Zellen innerhalb der Spalte. Da die Spaltenhintergrundfarbe über der Tabelle und Spaltengruppen (<colgroup>) gezeichnet wird, aber hinter den auf die Zeilengruppen (<thead>, <tbody> und <tfoot>), die Zeilen (<tr>) und die einzelnen Zellen (<th> und <td>) angewendeten Hintergrundfarben liegt, sind die auf die Tabellenspalten angewendeten Hintergründe nur sichtbar, wenn jede darüber gezeichnete Schicht einen transparenten Hintergrund hat.
  • border: Die verschiedenen border-Eigenschaften gelten, jedoch nur, wenn die <table>-Eigenschaft border-collapse: collapse gesetzt ist.
  • visibility: Der Wert collapse für eine Spalte bewirkt, dass alle Zellen dieser Spalte nicht angezeigt werden und Zellen, die in andere Spalten hineinragen, abgeschnitten werden. Der Platz, den diese Spalten eingenommen hätten, wird entfernt. Die Größe anderer Spalten wird jedoch weiterhin berechnet, als ob die Zellen in der zusammengeklappten Spalte(n) vorhanden wären. Andere Werte für visibility haben keine Auswirkungen.
  • 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 gängige Standards und bewährte Verfahren einführt.

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

HTML

Ein <colgroup>-Element bietet Strukturen für eine Basistabelle und erstellt eine einzelne implizite Spaltengruppe. Innerhalb des <colgroup> sind drei <col>-Elemente enthalten, die drei stilisierbare Spalten erstellen. Das span-Attribut gibt an, wie viele Tabellenspalten jedes <col> umfassen soll (standardmäßig 1, wenn weggelassen), wodurch 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>
  <thead>
    <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>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

CSS

Wir verwenden CSS anstelle der veralteten 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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <caption>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Spaltenzelle zu setzen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Spaltenzellen
• 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 zur Steuerung der Standardbreite für jede Spalte
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Spaltenzellen