HTML -tabel Colgroup
Het <colgroup>element wordt gebruikt om specifieke kolommen van een tabel op te maken.
HTML-tabel Colgroup
Als u de twee eerste kolommen van een tabel wilt opmaken, gebruikt u de elementen <colgroup>
en <col>
.
| MAANDAG | DI | WO | VERZAMELEN | VRIJ | ZA | ZON |
|---|---|---|---|---|---|---|
| 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 |
Het <colgroup>element moet worden gebruikt als een container voor de kolomspecificaties.
Elke groep wordt gespecificeerd met een <col>element.
Het spanattribuut specificeert hoeveel kolommen de stijl krijgt.
Het styleattribuut specificeert de stijl om de kolommen te geven.
Opmerking: er is een zeer beperkte selectie van legale CSS-eigenschappen voor colgroups .
Voorbeeld
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Opmerking: de <colgroup>tag moet een kind van een <table>element zijn en moet vóór alle andere tabelelementen worden geplaatst, zoals <thead>,
<tr>, <td>
enz., maar na het <caption>element, indien aanwezig.
Juridische CSS-eigenschappen
Er is slechts een zeer beperkte selectie van CSS-eigenschappen die in de colgroup mogen worden gebruikt:
widtheigendom
visibilityeigendom
backgroundeigenschappen
bordereigenschappen
Alle andere CSS-eigenschappen hebben geen effect op uw tabellen.
Meerdere Col-elementen
Als u meer kolommen met verschillende stijlen wilt opmaken, gebruikt u meer
<col>elementen in de
<colgroup>:
Voorbeeld
<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>
...
Lege colgroups
Als u kolommen in het midden van een tabel wilt opmaken, voegt u een "leeg"
<col>element (zonder stijlen) in voor de kolommen ervoor:
Voorbeeld
<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>
...
Kolommen verbergen
U kunt kolommen verbergen met de visibility: collapseeigenschap:
Voorbeeld
<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>
...