Grupa Colgroup tabeli HTML
Element <colgroup>
służy do stylizowania określonych kolumn tabeli.
Grupa Colgroup tabeli HTML
Jeśli chcesz nadać styl dwóm pierwszym kolumnom tabeli, użyj elementów <colgroup>
i <col>
.
MON | WT | POŚLUBIĆ | ZEBRAĆ | pt | SAT | SŁOŃCE |
---|---|---|---|---|---|---|
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 |
Element <colgroup>
powinien być używany jako pojemnik na specyfikacje kolumn.
Każda grupa jest określona za pomocą <col>
elementu.
Atrybut określa , span
ile kolumn otrzymuje styl.
Atrybut określa styl , style
jaki ma nadać kolumnom.
Uwaga: wybór dozwolonych właściwości CSS dla colgroups jest bardzo ograniczony .
Przykład
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Uwaga: tag <colgroup>
musi być dzieckiem <table>
elementu i powinien być umieszczony przed innymi elementami tabeli, takimi jak <thead>
,
<tr>
itp <td>
., ale po <caption>
elemencie, jeśli jest obecny.
Prawne właściwości CSS
W grupie colgroup można używać tylko bardzo ograniczonego wyboru właściwości CSS:
width
nieruchomość
visibility
nieruchomość
background
nieruchomość
border
nieruchomość
Wszystkie inne właściwości CSS nie będą miały wpływu na Twoje tabele.
Wiele elementów Col
Jeśli chcesz nadać styl większej liczbie kolumn przy użyciu różnych stylów, użyj większej liczby
<col>
elementów wewnątrz
<colgroup>
:
Przykład
<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>
...
Puste grupy kolektywne
Jeśli chcesz nadać styl kolumnom w środku tabeli, wstaw „pusty”
<col>
element (bez stylów) dla kolumn przed:
Przykład
<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>
...
Ukryj kolumny
Możesz ukryć kolumny za pomocą visibility: collapse
właściwości:
Przykład
<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>
...