HTML col-Tag - Learn HTML

Der <col>-Tag definiert die Eigenschaften einer oder mehrerer Spalten in einer HTML-Tabelle, die durch den <table>-Tag definiert wird. Er ermöglicht es, ganze Spalten auf einmal anzusprechen, anstatt jede einzelne <td>-Zelle separat zu gestalten. Der <col>-Tag wird fast immer innerhalb des <colgroup>-Tags verwendet, der eine oder mehrere Spalten mit gemeinsamen Eigenschaften zusammenfasst.

Der <col>-Tag wird innerhalb des <table>-Tags platziert, vor den <thead>-, <tbody>-, <tfoot>- und <tr>-Tags, und nach dem <caption>-Tag, falls dieser verwendet wird (im <caption>-Tag wird der Name der Tabelle eingefügt).

Wozu dient `<col>`?

Eine Tabellenzelle wird an der Schnittmenge einer Zeile und einer Spalte dargestellt, aber die HTML-Struktur ist zeilenorientiert: <tr> gruppiert Zellen horizontal, und es gibt kein zeilenweises Element, das Zellen vertikal gruppiert. Das <col>-Element füllt diese Lücke. Anstatt jedem <td> in einer Spalte dieselbe width, background-color oder border hinzuzufügen, deklariert man diese Eigenschaft einmal am <col>, und der Browser wendet sie auf die gesamte Spalte an.

Dies ist besonders nützlich, wenn man:

Einer Spalte eine feste oder proportionale Breite geben möchte (zum Beispiel die erste Spalte schmal und die letzte Spalte breit machen).
Eine Spalte mit einer Hintergrundfarbe hervorheben möchte, um die Aufmerksamkeit des Lesers zu lenken.
Einen Rahmen auf eine Spalte anwenden möchte, um sie visuell abzutrennen.

Eine Einschränkung sollte man im Hinterkopf behalten: Ein <col>-Element enthält keinen Inhalt und kann nicht frei gestaltet werden. Browser wenden über <col> nur einen kleinen Satz von CSS-Eigenschaften an — background, border, width und visibility. Eigenschaften wie padding, color oder font-size werden bei <col> ignoriert; für diese muss man die <td>-/<th>-Zellen direkt gestalten.

Syntax

Der <col>-Tag ist leer, das heißt, das schließende Tag ist nicht erforderlich. In XHTML muss der <col>-Tag jedoch selbst geschlossen werden (<col />). In modernem HTML5 wird der schließende Schrägstrich weggelassen (<col>).

Beispiel für den HTML-`<col>`-Tag:

HTML-<col>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Probier es selbst »

Ergebnis

Result

Das `span`-Attribut

Das span-Attribut weist ein einzelnes <col>-Element an, mehrere aufeinanderfolgende Spalten abzudecken. Dadurch wird die Wiederholung desselben <col> für benachbarte Spalten vermieden, die identisch aussehen sollen. Der Wert muss eine positive ganze Zahl sein; der Standardwert ist 1.

Im folgenden Beispiel gestaltet ein einziges <col span="3"> die ersten drei Spalten auf einmal, während ein zweites <col> die vierte Spalte eigenständig gestaltet:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="3" style="background-color: #eee;" />
        <col style="background-color: #8ebf42;" />
      </colgroup>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>120</td>
        <td>98</td>
        <td>143</td>
        <td>361</td>
      </tr>
    </table>
  </body>
</html>

Spalten mit CSS gestalten

Die Attribute align, valign und width sind in HTML5 veraltet — sie wurden aus der Spezifikation entfernt, und man sollte sich nicht auf sie verlassen. Die moderne Vorgehensweise besteht darin, Breiten und andere unterstützte Eigenschaften mit CSS statt mit präsentationsbezogenen Inline-Attributen festzulegen.

Man kann ein <col>-Element direkt ansprechen oder ihm eine class zuweisen und diese Klasse gestalten. Da width eine der Eigenschaften ist, die tatsächlich über <col> angewendet wird, funktioniert dies gut:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
      /* Style the column directly */
      col.label {
        width: 60%;
      }
      /* Or use the column index */
      col.value {
        width: 40%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="label" />
        <col class="value" />
      </colgroup>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Keyboard</td>
        <td>$29</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$15</td>
      </tr>
    </table>
  </body>
</html>

Warnung

Nur ein begrenzter Satz von CSS-Eigenschaften wirkt sich aus, wenn er auf <col> angewendet wird: background, border, width und visibility (zum Beispiel visibility: collapse, um eine Spalte auszublenden). Eigenschaften wie padding, color, text-align und font-size werden bei der Spalte ignoriert und müssen stattdessen auf den <td>- oder <th>-Zellen gesetzt werden.

Barrierefreiheit

Die <col>- und <colgroup>-Elemente sind rein präsentationsbezogen — sie gruppieren Spalten visuell, schaffen aber keine semantische Beziehung, die Screenreader ankündigen. Ein Screenreader navigiert eine Tabelle Zelle für Zelle anhand der Zeilen- (<tr>) und Kopfzellen- (<th>)-Zuordnungen, nicht anhand von Spaltengruppen.

Um eine Datentabelle verständlich zu machen, wenn sie nicht in der richtigen Reihenfolge gelesen wird:

Verwenden Sie geeignete <th>-Kopfzellen mit dem scope-Attribut (scope="col" für Spaltenköpfe), damit jede Datenzelle mit ihrer Überschrift verknüpft ist.
Fügen Sie eine <caption> hinzu, um der Tabelle einen Namen zu geben.
Verwenden Sie background-color bei einem <col> nicht als einziges Mittel zur Bedeutungsvermittlung (z. B. "gültige" vs. "ungültige" Spalten), da Farbe für Screenreader-Nutzer und für Menschen, die Farben nicht unterscheiden können, unsichtbar ist. Kombinieren Sie es mit Text oder einem Symbol.

Attribute

Attribut	Wert	Beschreibung
`span`	`number`	Legt die Anzahl der Spalten fest, deren Eigenschaften durch das `<col>`-Element bestimmt werden. Der Wert muss eine positive ganze Zahl sein. Wenn der Parameter nicht angegeben wird, ist der Standardwert `1`.
`align`	`left`, `right`, `center`, `justify`, `char`	Legt die horizontale Ausrichtung des Spalteninhalts fest. In HTML5 veraltet — verwenden Sie stattdessen die CSS-Eigenschaft `text-align` auf den `<td>`-/`<th>`-Zellen.
`char`	`character`	Richtet den Spalteninhalt an einem Zeichen aus. Wird nur mit `align="char"` verwendet. In HTML5 veraltet.
`charoff`	`number`	Versetzt den Inhalt relativ zum Ausrichtungszeichen. Wird nur mit `align="char"` verwendet. In HTML5 veraltet.
`valign`	`top`, `middle`, `bottom`, `baseline`	Richtet den Inhalt vertikal aus. In HTML5 veraltet — verwenden Sie stattdessen die CSS-Eigenschaft `vertical-align` auf den Zellen.
`width`	`%`, `pixels`, `relative_length`	Legt die Breite der Spalte fest. In HTML5 veraltet — verwenden Sie stattdessen die CSS-Eigenschaft `width` auf dem `<col>` (z. B. `col { width: 40%; }`).

span ist das einzige Attribut, das in HTML5 noch für <col> definiert ist. Alles, was früher mit align, valign und width erledigt wurde, wird jetzt mit CSS gemacht, wie im Abschnitt "Spalten mit CSS gestalten" oben gezeigt.

Der <col>-Tag unterstützt auch die Globalen Attribute und die Ereignis-Attribute.

Übung

Was bewirkt der HTML col-Tag in einer Tabelle?

Er definiert die Eigenschaften einer oder mehrerer Spalten innerhalb eines colgroup-ElementsEr definiert einen Kopfbereich des HTML-DokumentsEr beginnt eine neue TabellenzeileEr gestaltet direkt den Text und das Padding jeder Zelle in einer Spalte

Wozu dient <col>?