BESTE WEBSITE FÜR WEBENTWICKLER
HTML5-Lektionen für Anfänger

Ua En Es

HTML -Tabellen-Spaltengruppe


Das Element <colgroup> wird verwendet, um bestimmte Spalten einer Tabelle zu formatieren.


HTML-Tabellen-Spaltengruppe

Wenn Sie die beiden ersten Spalten einer Tabelle formatieren möchten, verwenden Sie <colgroup> und <col> Elemente.

MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

Das Element <colgroup> sollte als Container für die Spaltenspezifikationen verwendet werden.

Jede Gruppe wird mit einem <col>-Element angegeben.

Das Attribut span gibt an, wie viele Spalten den Stil erhalten.

Das Attribut style gibt den Stil an, der den Spalten zugewiesen werden soll.

Hinweis: Es gibt eine sehr begrenzte Auswahl an legalen CSS-Eigenschaften für Kolgruppen.

Beispiel

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...
Try it Yourself »

Notiz: Das <colgroup>-Tag muss ein untergeordnetes Element eines <table>-Elements sein und sollte vor allen anderen platziert werden Tabellenelemente, wie <thead>,<tr>, <td> usw., aber nach dem Element <caption>, falls vorhanden.


Zulässige CSS-Eigenschaften

Es gibt nur eine sehr begrenzte Auswahl an CSS-Eigenschaften, die in der colgroup verwendet werden dürfen:

width Eigentum
visibility Eigentum
background Eigenschaften
border Eigenschaften

Alle anderen CSS-Eigenschaften haben keine Auswirkungen auf Ihre Tabellen.


Mehrere Col-Elemente

Wenn Sie mehr Spalten mit unterschiedlichen Stilen gestalten möchten, verwenden Sie mehr <col>-Elemente innerhalb der <colgroup>:

Beispiel

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...
Try it Yourself »

Leere Colgroups

Wenn Sie Spalten in der Mitte einer Tabelle formatieren möchten, fügen Sie vorher ein „leeres“ <col>-Element (ohne Stile) für die Spalten ein:

Beispiel

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...
Try it Yourself »

Spalten ausblenden

Sie können Spalten mit der Eigenschaft visibility: collapse ausblenden:

Beispiel

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...
Try it Yourself »


Kommentare