HTML Table Colgroup
Die <colgroup>element word gebruik om spesifieke kolomme van 'n tabel te styl.
HTML Table Colgroup
As jy die twee eerste kolomme van 'n tabel wil stileer, gebruik die <colgroup>
en <col>
elemente.
| MAAN | DINS | TROU | VERSAMEL | VRY | SAT | SON |
|---|---|---|---|---|---|---|
| 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 |
Die <colgroup>element moet as 'n houer vir die kolomspesifikasies gebruik word.
Elke groep word met 'n <col>element gespesifiseer.
Die spankenmerk spesifiseer hoeveel kolomme wat die styl kry.
Die stylekenmerk spesifiseer die styl om die kolomme te gee.
Let wel: Daar is 'n baie beperkte keuse van wettige CSS-eienskappe vir kolgroepe .
Voorbeeld
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Let wel: Die <colgroup>merker moet 'n kind van 'n <table>element wees en moet voor enige ander tabelelemente, soos <thead>,
<tr>, <td>
ens. geplaas word, maar na die <caption>element, indien teenwoordig.
Wettige CSS-eienskappe
Daar is slegs 'n baie beperkte keuse van CSS-eienskappe wat toegelaat word om in die kolgroep gebruik te word:
widtheiendom
visibilityeiendom
backgroundeiendomme
bordereiendomme
Alle ander CSS-eienskappe sal geen effek op jou tabelle hê nie.
Veelvuldige Kol Elemente
As jy meer kolomme met verskillende style wil stileer, gebruik meer
<col>elemente binne die
<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>
...
Leë Colgroups
As jy kolomme in die middel van 'n tabel wil stileer, voeg 'n "leë"
<col>element (met geen style) in vir die kolomme voor:
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>
...
Versteek kolomme
U kan kolomme versteek met die visibility: collapseeiendom:
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>
...