<colgroup>
Grupa kolumn tabeli, którą można ostylować jednym ruchem.
- Wyświetlanie
- table-column-group
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<col>albo nic, gdy podanospan
Przykład
#<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; }
.student { width: 110px; }
.quizzes { background: #38bdf826; }
</style>
<table>
<colgroup>
<col class="student">
</colgroup>
<colgroup class="quizzes" span="3"></colgroup>
<tr><th scope="col">Uczeń</th><th scope="col">Quiz 1</th><th scope="col">Quiz 2</th><th scope="col">Quiz 3</th></tr>
<tr><th scope="row">Ola</th><td>9</td><td>10</td><td>8</td></tr>
<tr><th scope="row">Kuba</th><td>7</td><td>9</td><td>9</td></tr>
</table>Definicja i zastosowanie
#Element <colgroup> definiuje grupę kolumn. Umieszczasz go w tabeli zaraz po <caption>, a przed <thead>. Kolumny opisujesz w środku elementami <col> albo, jeśli wszystkie mają wyglądać tak samo, samym atrybutem span.
Kolumny w HTML nie są prawdziwymi pojemnikami: komórki należą do wierszy, a nie do kolumn. Dlatego przez <colgroup> i <col> ustawisz tylko kilka właściwości: background, border (przy border-collapse: collapse), width i visibility: collapse. Kolor tekstu czy wyrównanie trzeba ustawić na komórkach.
Grupy kolumn przydają się w tabelach porównawczych i planach: wyróżnisz tłem weekend w tygodniowym grafiku albo ustalisz szerokość kolumny z opisem, bez dodawania klas do każdej komórki.
Składnia
#<colgroup>
<col>
<col span="2">
</colgroup>Atrybuty
#liczba dodatnia (domyślnie 1)
Liczba kolumn w grupie. Używasz go tylko wtedy, gdy grupa nie zawiera elementów<col>. Jeśli są w środku, to one wyznaczają liczbę kolumn.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#span
liczba dodatnia (domyślnie 1)Liczba kolumn w grupie. Używasz go tylko wtedy, gdy grupa nie zawiera elementów <col>. Jeśli są w środku, to one wyznaczają liczbę kolumn.
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 8px; text-align: center; }
.weekend { background: #f43f5e26; }
</style>
<table>
<caption>Minuty nauki w tym tygodniu</caption>
<colgroup span="5"></colgroup>
<colgroup span="2" class="weekend"></colgroup>
<tr><th>Pn</th><th>Wt</th><th>Śr</th><th>Cz</th><th>Pt</th><th>Sb</th><th>Nd</th></tr>
<tr><td>30</td><td>45</td><td>20</td><td>0</td><td>60</td><td>90</td><td>15</td></tr>
</table>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
colgroup {
display: table-column-group;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli ustawiasz
coloralbotext-alignna<colgroup>i nic się nie dzieje, to nie błąd. Kolumny obsługują tylko tło, obramowanie, szerokość i widoczność. - Do wyróżnienia pojedynczej kolumny w grupie użyj
<col>z klasą.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.