HTML `<colgroup>`-Tag

Das HTML <colgroup>-Tag wird verwendet, um eine Gruppe von Spalten mit gemeinsamen Eigenschaften innerhalb einer Tabelle anzugeben. Das Tag kann nur <col>-Elemente enthalten, die die Spalteneigenschaften definieren.

Das <colgroup>-Tag wird in ein <table>-Tag eingebettet, vor <thead>, <tbody>, <tfoot> und <tr>, und nach <caption>, falls es verwendet wird (im <caption>-Tag wird die Tabellenüberschrift eingefügt).

Eine einzelne HTML-Tabelle kann mehrere <colgroup>-Tags enthalten.

Syntax

Das <colgroup>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<colgroup>) und dem schließenden (</colgroup>) Tag geschrieben.

Beispiel für das HTML `<colgroup>`-Tag:

HTML <colgroup>-Tag

html

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

Try it Yourself »

Ergebnis

colgroup Beispiel

Attribute

Hinweis: Präsentationsattribute wie align, valign und width sind in HTML5 veraltet. Verwenden Sie stattdessen CSS-Eigenschaften (text-align, vertical-align, width).

Attribut	Wert	Beschreibung
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Legt die Ausrichtung des Spalteninhalts fest. Nicht in HTML5 unterstützt.
`char`	Zeichen	Richtet den Inhalt der Spalte am angegebenen Zeichen aus. Wird nur verwendet, wenn `align="char"`. Nicht in HTML5 unterstützt.
`charoff`	Zahl	Verschiebt den Inhalt der Zelle relativ zum angegebenen Zeichen. Wird nur verwendet, wenn `align="char"`. Nicht in HTML5 unterstützt.
`span`	Zahl	Legt die Anzahl der Spalten fest, auf die das `<col>`-Element angewendet wird. Standardwert ist 1.
`valign`	`top` \| `middle` \| `bottom` \| `baseline`	Richtet den Inhalt vertikal aus. Nicht in HTML5 unterstützt.
`width`	`%` \| `Pixel` \| `relative_length`	Legt die Breite der Spalte fest. Nicht in HTML5 unterstützt.

Das <colgroup>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.

Praxis

Welche ist die korrekte Darstellung und der Anwendungsfall des HTML <colgroup>-Tags?

Das <colgroup>-Tag definiert eine Gruppe von einer oder mehreren Spalten in einer Tabelle zum Formatieren.<colgroup> ist ein selbstschließendes Tag.Sie können in HTML5 keine Stile mit <colgroup> verwenden.Das <colgroup>-Tag unterstützt das span-Attribut nicht.Das <colgroup>-Tag wird verwendet, um den Header-Inhalt in einer Tabelle zu gruppieren.

HTML <colgroup>-Tag ​

Syntax ​

Beispiel für das HTML <colgroup>-Tag: ​

Ergebnis ​