Tagi HTML: colgroup

Co to jest `<colgroup>` i kiedy go używać

Element <colgroup> służy do grupowania kolumn tabeli w logiczne jednostki, co pozwala stosować wspólne style CSS do wielu kolumn jednocześnie, bez formatowania każdej komórki z osobna.

Umiejscowienie jest ściśle określone: <colgroup> musi znajdować się bezpośrednio wewnątrz <table>, tuż po opcjonalnym <caption> i przed <thead>, <tbody> lub <tfoot>.

Najczęstsze scenariusze, w których <colgroup> naprawdę pomaga:

spójne wyróżnianie kolumn – gdy jedna lub kilka kolumn ma otrzymać ten sam styl (np. tło, szerokość);
czytelny, skalowalny CSS – zamiast powtarzać reguły w wielu komórkach, definiujesz je raz dla całej kolumny;
precyzyjna kontrola layoutu – łatwo ustawisz szerokości i wyrównanie wielu kolumn, także w połączeniu z <col>.

Struktura i składnia

Istnieją dwa sposoby użycia <colgroup> – z atrybutem span lub z elementami potomnymi <col>.

Wariant 1: atrybut `span`

Wybierz ten wariant, gdy chcesz objąć stylem kilka kolejnych kolumn bez dodawania elementów potomnych. Przykładowy kod:

<table> <caption>Inwentarz magazynu</caption> <colgroup span="2" style="background-color: yellow;"></colgroup> <colgroup span="1" style="background-color: lightblue;"></colgroup> <tr> <th>Przedmiot</th> <th>Ilość</th> <th>Status</th> </tr> <tr> <td>Szafa</td> <td>10</td> <td>Dostępne</td> </tr> </table>

Wariant 2: zagnieżdżone elementy `<col>`

W tym wariancie każdą kolumnę można sformatować indywidualnie wewnątrz jednego <colgroup>. Przykładowy kod:

<table> <caption>Inwentarz magazynu</caption> <colgroup> <col style="background-color: yellow;"> <col style="background-color: lightgreen;"> <col style="background-color: lightblue;"> </colgroup> <tr> <th>Przedmiot</th> <th>Ilość</th> <th>Status</th> </tr> <tr> <td>Szafa</td> <td>10</td> <td>Dostępne</td> </tr> </table>

Atrybut `span` – klucz do grupowania

Atrybut span określa liczbę kolumn, które obejmuje dana grupa. Na przykład span="3" zastosuje styl do trzech pierwszych kolumn tabeli.

Ważne ograniczenie: jeśli <colgroup> ma atrybut span, nie może zawierać potomnych elementów <col> – te metody się wykluczają.

Poniżej przykład z kilkoma grupami kolumn ustawionymi obok siebie:

<table border="1" style="width: 500px;"> <colgroup span="2" style="background-color: yellow;"></colgroup> <colgroup span="2" style="background-color: lightcyan;"></colgroup> <tr> <th>Kolumna 1</th> <th>Kolumna 2</th> <th>Kolumna 3</th> <th>Kolumna 4</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> </table>

Element `<col>` – precyzyjna kontrola

<col> umożliwia stylowanie konkretnych kolumn wewnątrz <colgroup>. Oto podstawowy przykład:

<table> <colgroup> <col class="pierwsza-kolumna"> <col class="druga-kolumna"> <col class="trzecia-kolumna"> </colgroup> <tr> <th>Imię i nazwisko</th> <th>E-mail</th> <th>Telefon</th> </tr> <tr> <td>Jan Kowalski</td> <td>[email protected]</td> <td>123-456-789</td> </tr> </table>

<col> także obsługuje atrybut span, aby jednym wpisem objąć kilka sąsiadujących kolumn. Przykładowy kod:

<colgroup> <col class="wyroznienie" span="2"> <col class="normalne"> </colgroup>

Kaskada stylów i priorytet formatowania

Style z <col> nadpisują style z <colgroup>, a style z <colgroup> mają wyższy priorytet niż style ustawione bezpośrednio na <table>. Dla szybkiego przypomnienia, kolejność priorytetu wygląda tak:

tabela – styl bazowy obowiązujący cały element <table>;
colgroup – nadpisuje styl tabeli dla kolumn objętych grupą;
col – ma najwyższy priorytet w obrębie kolumn i nadpisuje <colgroup>.

Przykład działania kaskady w praktyce:

<table style="background-color: gray;"> <colgroup style="background-color: yellow;"> <col style="background-color: red;"> <col> </colgroup> <tr> <td>Będzie czerwone (col)</td> <td>Będzie żółte (colgroup)</td> </tr> </table>

Efekt: pierwsza kolumna będzie czerwona, druga żółta, a trzecia (gdyby istniała) – szara, zgodnie ze stylem tabeli.

Praktyczne przykłady zastosowania

Przykład 1 – tabela z wyróżnionym nagłówkiem kolumny

Oto prosty przykład, w którym pierwsza kolumna otrzymuje kontrastowe tło i kolor tekstu:

<table border="1" style="width: 100%; border-collapse: collapse;"> <colgroup span="1" style="background-color: #333; color: white;"></colgroup> <colgroup span="2"></colgroup> <tr> <th>ID</th> <th>Nazwa produktu</th> <th>Cena (PLN)</th> </tr> <tr> <td>001</td> <td>Monitor 27"</td> <td>1200</td> </tr> <tr> <td>002</td> <td>Klawiatura mechaniczna</td> <td>450</td> </tr> </table>

Przykład 2 – tabela ze zmiennym formatowaniem kolumn

Poniżej pokazano, jak nadać różne szerokości, tła i wyrównanie dla każdej kolumny:

<table border="1"> <colgroup> <col style="width: 20%; background-color: #f0f0f0;"> <col style="width: 40%; background-color: white;"> <col style="width: 20%; text-align: center;"> <col style="width: 20%; background-color: #e8f5e9;"> </colgroup> <tr> <th>Kategoria</th> <th>Opis</th> <th>Priorytet</th> <th>Status</th> </tr> <tr> <td>Frontend</td> <td>Optymalizacja wydajności strony</td> <td>1</td> <td>✓ Ukończono</td> </tr> <tr> <td>Backend</td> <td>Refaktoryzacja bazy danych</td> <td>2</td> <td>⧖ W trakcie</td> </tr> </table>

Przykład 3 – zaawansowana konfiguracja z CSS

Za pomocą klas CSS można stworzyć spójne, wielokrotnego użytku style dla grup kolumn:

<!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; } .lp { background-color: #e3f2fd; font-weight: bold; } .dane { background-color: #f5f5f5; } .akcje { background-color: #fff3e0; text-align: center; } th, td { padding: 12px; text-align: left; border: 1px solid #ddd; } </style> </head> <body> <table> <colgroup> <col class="lp" span="1"> <col class="dane" span="2"> <col class="akcje" span="1"> </colgroup> <tr> <th>Lp.</th> <th>Imię</th> <th>Nazwisko</th> <th>Akcje</th> </tr> <tr> <td>1</td> <td>Adam</td> <td>Nowak</td> <td><button>Edytuj</button></td> </tr> <tr> <td>2</td> <td>Barbara</td> <td>Kowalska</td> <td><button>Edytuj</button></td> </tr> </table> </body> </html>

Specyfikacja i kompatybilność

Najważniejsze informacje ze specyfikacji HTML dotyczące <colgroup> to:

element nadrzędny – <table> (bezpośrednio po opcjonalnym <caption>);
elementy potomne – gdy jest span: brak; gdy nie ma span: dozwolone są <col> i <template>;
interfejs DOM – HTMLTableColElement;
znaczniki – <colgroup> i </colgroup> (znacznik zamykający bywał opcjonalny w starszym HTML, ale zaleca się go zawsze dodawać).

<colgroup> jest szeroko wspierany przez wszystkie współczesne przeglądarki i stanowi część standardu HTML5.

Ograniczenia i uwagi praktyczne

Pamiętaj o kilku istotnych ograniczeniach i dobrych praktykach pracy z <colgroup>:

obsługiwane właściwości CSS – skutecznie ustawisz m.in. tło, szerokość czy wyrównanie, ale nie wszystkie właściwości CSS działają na poziomie kolumn (np. marginesy mogą być ignorowane);
brak zagnieżdżonych tabel – <colgroup> nie może zawierać innych tabel i służy wyłącznie do definiowania kolumn;
responsywność – w układach mobilnych rozważ, czy <colgroup> jest optymalne; czasem lepiej sprawdzą się CSS Grid lub Flexbox;
semantyka – <colgroup> pomaga głównie w stylizacji; jeśli chcesz grupować kolumny semantycznie (logiczne sekcje danych), rozważ dodatkowe opisy lub komentarze w kodzie.

Co to jest <colgroup> i kiedy go używać