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 »
