HTML <colgroup>-Tag

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

Das <colgroup>-Tag ist innerhalb eines <table>-Tags verschachtelt, vor <thead>, <tbody>, <tfoot> und <tr>, und nach <caption>, sofern es verwendet wird (im <caption>-Tag wird die Tabellenüberschrift eingefügt).

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

Wozu dient `<colgroup>`?

Zellen einer HTML-Tabelle werden zeilenweise geschrieben, weshalb es keinen natürlichen Ort gibt, um Stile anzuwenden, die für eine gesamte Spalte gelten sollen. Die Elemente <colgroup> und <col> lösen dieses Problem: Sie beschreiben die Spalten der Tabelle einmalig am Anfang und ermöglichen es, gemeinsame Eigenschaften (Breite, Hintergrund, Rahmen) gleichzeitig auf alle Zellen dieser Spalten anzuwenden.

Zwei praktische Vorteile:

Mehrere Spalten auf einmal gestalten. Eine Breite oder einen Hintergrund für eine Spaltengruppe festlegen, ohne diese auf jedes <td> in jeder Zeile wiederholen zu müssen.
Struktur von Darstellung trennen. Die Spaltendefinitionen befinden sich in einem kleinen Block am Anfang der Tabelle, anstatt über die Zellen verteilt zu sein, was das Markup leichter lesbar und wartbar macht.

Syntax

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

Beispiel des HTML-Tags `<colgroup>`:

HTML-Tag <colgroup>

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

span steuert, wie viele aufeinanderfolgende Spalten ein Element abdeckt, hat jedoch je nach Verwendungsort eine leicht unterschiedliche Bedeutung:

span bei <colgroup> gibt an, dass die Gruppe selbst diese Anzahl von Spalten umfasst. Verwenden Sie es, wenn Sie mehrere aufeinanderfolgende Spalten als einen gestalteten Block behandeln möchten und keine einzelnen <col>-Kindelemente benötigen. Zum Beispiel gruppiert <colgroup span="3"> die ersten drei Spalten.
span bei einem untergeordneten <col> gibt an, auf wie viele Spalten dieses <col> angewendet wird. Damit kann ein einzelnes <colgroup> mehrere Spalten mit unterschiedlichen Regeln beschreiben, wie im obigen Beispiel, wo <col span="2"> die ersten beiden Spalten und das nächste <col> die dritte Spalte abdeckt.

Wenn ein <colgroup> <col>-Kindelemente enthält, beschreiben diese die Spalten, und Sie sollten span nicht zusätzlich beim <colgroup> angeben.

Mehrere `<colgroup>`-Elemente verwenden

Eine Tabelle kann mehr als ein <colgroup> enthalten. Jede Gruppe beansprucht der Reihe nach die nächste Menge von Spalten, was praktisch ist, um logische Abschnitte einer Tabelle visuell zu trennen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background-color:#eee;" />
      </colgroup>
      <colgroup span="2" style="background-color:#cde6a5;"></colgroup>
      <tr>
        <th>Product</th>
        <th>Q1 Sales</th>
        <th>Q2 Sales</th>
      </tr>
      <tr>
        <td>Widgets</td>
        <td>120</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Gadgets</td>
        <td>90</td>
        <td>110</td>
      </tr>
    </table>
  </body>
</html>

Result

Das erste <colgroup> gestaltet die linkeste Spalte; das zweite, mit span="2", gestaltet die beiden Verkaufsspalten als eine Gruppe.

Spalten mit CSS gestalten

Der sauberste moderne Ansatz besteht darin, das Markup minimal zu halten und die Darstellung in ein Stylesheet auszulagern, wobei die <col>- und <colgroup>-Elemente mit CSS angesprochen werden, anstatt die veralteten Attribute align, valign und width zu verwenden. Eine begrenzte, aber nützliche Menge von CSS-Eigenschaften wirkt durch diese Elemente: background-color, background, border, width und visibility.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
      .highlight {
        background-color: #8ebf42;
      }
      col.narrow {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="narrow" />
        <col class="highlight" />
      </colgroup>
      <tr>
        <th>Code</th>
        <th>Item</th>
      </tr>
      <tr>
        <td>A1</td>
        <td>Notebook</td>
      </tr>
    </table>
  </body>
</html>

Ein praktischer Fallstrick: Die background-color einer Spalte ist nur dort sichtbar, wo die Zellen selbst transparent sind. Wenn ein <td> oder <tr> seinen eigenen Hintergrund festlegt, überschreibt diese zellenspezifische Farbe die Spaltenfarbe.

Barrierefreiheit

<colgroup> und <col> sind rein präsentational — sie beeinflussen das Erscheinungsbild, tragen aber keine semantische Bedeutung für unterstützende Technologien. Screenreader kündigen Spaltengruppen nicht an, und ihre Verwendung verknüpft keine Überschriften mit Datenzellen. Um eine Tabelle barrierefrei zu gestalten, verwenden Sie echte Kopfzellen (<th>) mit geeigneten scope-Attributen; verlassen Sie sich nicht auf <colgroup> zur Strukturvermittlung.

Attribute

Hinweis: Präsentationsattribute wie align, valign und width sind in HTML5 veraltet. Gestalten Sie Spalten mit CSS (text-align, vertical-align, width), das auf die <col>- und <colgroup>-Elemente abzielt.

Attribut	Wert	Beschreibung
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Legt die Ausrichtung des Spalteninhalts fest. In HTML5 nicht unterstützt.
`char`	Zeichen	Richtet den Inhalt der Spalte am angegebenen Zeichen aus. Wird nur verwendet, wenn `align="char"`. In HTML5 nicht unterstützt.
`charoff`	Zahl	Verschiebt den Zelleninhalt relativ zum angegebenen Zeichen. Wird nur verwendet, wenn `align="char"`. In HTML5 nicht 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. In HTML5 nicht unterstützt.
`width`	`%` \| `pixels` \| `relative_length`	Legt die Breite der Spalte fest. In HTML5 nicht unterstützt.

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

Übung

Was ist die korrekte Darstellung und Verwendung des HTML-Tags colgroup?

Das Tag <colgroup> definiert eine Gruppe von einer oder mehreren Spalten in einer Tabelle zur Formatierung.<colgroup> ist ein selbstschließendes Tag.CSS-Eigenschaften wie background-color und width gelten nie durch <colgroup>.Das Tag <colgroup> unterstützt das span-Attribut nicht.Das Tag <colgroup> wird verwendet, um den Header-Inhalt in einer Tabelle zu gruppieren.

Wozu dient <colgroup>?