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 , spanile kolumn otrzymuje styl.
Atrybut określa styl , stylejaki 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:
widthnieruchomość
visibilitynieruchomość
backgroundnieruchomość
bordernieruchomość
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: collapsewł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>
...