Tagi HTML: col

Tag <col> służy do definiowania właściwości dla jednej lub wielu kolumn w tabeli i umieszczany jest wyłącznie wewnątrz <colgroup>. Dzięki temu możesz nadawać styl całym kolumnom bez powtarzania reguł w każdej komórce (<td> lub <th>), co upraszcza kod i ułatwia utrzymanie.

Element <col> nie zawiera treści i stosuje style do całych kolumn tabeli.

Podstawowa rola i kontekst użycia

Element <col> reprezentuje odwołanie do określonej liczby kolumn w tabeli HTML i służy do przypisywania im stylów lub atrybutów. Najczęściej wykorzystasz go do ustawiania szerokości, koloru tła, obramowań czy widoczności całych kolumn.

Aby działał poprawnie, pamiętaj o zasadach umieszczania:

• wewnątrz <colgroup> – to jedyne dozwolone miejsce w obrębie <table>;
• kolejność w tabeli – po <caption> (jeśli występuje), a przed <thead>, <tbody>, <tfoot> lub pierwszym <tr>;
• element pusty – <col> nie ma znacznika zamykającego i nie może mieć dzieci.

Zalety użycia <col> –

• Efektywność – jeden tag stylizuje wiele komórek w kolumnie;
• Separacja stylów – reguły CSS stosujesz centralnie do kolumn, bez powtarzania w <td>;
• Dostępność – poprawia przejrzystość struktury tabeli dla technologii asystujących.

<col> jest elementem pustym – znacznik zamykający </col> jest niedozwolony.

Kluczowe atrybuty elementu <col>

Element <col> wspiera atrybut span oraz atrybuty globalne (m.in. id, class, style, title). Oto szczegóły:

Atrybut span pozwala jednym elementem objąć i wystylować wiele kolumn, co znacząco upraszcza kod.

Przykłady użycia – od prostych do zaawansowanych

Przykład 1 – stylizacja pojedynczych kolumn

Trzy osobne <col> nadają różne kolory tła kolejnym kolumnom. Przykładowy kod:

<table>
<colgroup>
<col style="background-color: red;"> <!-- 1. kolumna -->
<col style="background-color: green;"> <!-- 2. kolumna -->
<col style="background-color: blue;"> <!-- 3. kolumna -->
</colgroup>
<tr>
<th>Jabłka</th>
<th>Gruszki</th>
<th>Banany</th>
</tr>
<tr>
<td>5 kg</td>
<td>3 kg</td>
<td>4 kg</td>
</tr>
</table>

Rezultat – pierwsza kolumna czerwona, druga zielona, trzecia niebieska – bez stylowania poszczególnych komórek.

Przykład 2 – użycie span do grupowania kolumn

Jeden <col> z span="2" stylizuje dwie kolejne kolumny naraz. Przykładowy kod:

<table border="1">
<caption>Owoce Świata</caption>
<colgroup>
<col span="1" style="background-color: orange;"> <!-- 1. kolumna -->
<col span="2" style="background-color: yellow;"> <!-- 2. i 3. kolumna -->
</colgroup>
<tr>
<th>A - I</th>
<th>J - R</th>
<th>S - Z</th>
</tr>
<tr><td>ananas</td><td>jabłko</td><td>truskawka</td></tr>
<tr><td>banan</td><td>kokos</td><td>winogrono</td></tr>
<tr><td>cytryna</td><td>malina</td><td>wiśnia</td></tr>
</table>

Rezultat – pierwsza kolumna pomarańczowa, pozostałe dwie żółte; span="2" obejmuje dwie kolumny.

Przykład 3 – wiele grup kolumn (<colgroup>) bez zagnieżdżania

W jednej tabeli możesz mieć kilka sąsiadujących grup kolumn. Poniżej pierwsza grupa to jedna kolumna żółta, a druga grupa to dwie kolumny w kolorach limonkowym i srebrnym. Przykładowy kod:

<table border="1" style="width: 500px;">
<colgroup span="1" style="background-color: yellow;"></colgroup>
<colgroup>
<col style="background-color: lime;">
<col style="background-color: silver;">
</colgroup>
<tr>
<th></th>
<th>A</th>
<th>B</th>
</tr>
<tr>
<th>1</th>
<td>Komórka1</td>
<td>Komórka2</td>
</tr>
</table>

Rezultat – pierwsza kolumna żółta; druga i trzecia kolumna odpowiednio limonkowa i srebrna.

Przykład 4 – klasy CSS i większe tabele

Korzystaj z klas w <col>, aby trzymać style w arkuszu i łatwo zmieniać wygląd całych kolumn. Przykładowy kod:

<style>
.kol-grupa1 { background: pink; }
table { border-collapse: collapse; }
th, td { padding: 6px 10px; border: 1px solid #ccc; }
</style>

<table>
<caption>Moja tabelka testowa</caption>
<colgroup>
<col>
<col span="2" class="kol-grupa1">
<col>
<col>
</colgroup>
<tr>
<th>LP.</th>
<th colspan="2">Imię i nazwisko</th>
<th>Napój</th>
<th>Posiłek</th>
</tr>
<tr><td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td></tr>
<tr><td>2</td><td>Marek</td><td>Koleś</td><td>Cola</td><td>Czekolada</td></tr>
</table>

Rezultat – druga i trzecia kolumna (imię/nazwisko) mają wspólne tło zdefiniowane klasą.

Integracja z CSS i JavaScript

Przykład selektora CSS, który styluje pierwszą kolumnę w grupie kolumn tabeli:

col:nth-child(1) {
background-color: red;
width: 20%;
}

Elementy <col> mają domyślny typ wyświetlania table-column; nie wszystkie właściwości CSS mają do nich zastosowanie (np. wyrównanie tekstu).

Dynamiczna zmiana stylu kolumny w JavaScript (np. podświetlenie kolumn 2–3):

document.querySelector('col[span="2"]').style.backgroundColor = 'purple';

Błędy i dobre praktyki

Najczęstsze pułapki i zalecenia podczas pracy z <col> i <colgroup>:

• poza <colgroup> – użycie <col> bezpośrednio w tabeli nie zadziała;
• mieszanie trybów w <colgroup> – nie łącz atrybutu span z wewnętrznymi <col> w tym samym <colgroup>;
• atrybuty prezentacyjne – unikaj przestarzałych atrybutów (np. align); preferuj reguły CSS;
• semantyka tabel – korzystaj z <caption>, <thead>, <tbody>, <tfoot> dla lepszej struktury i dostępności;
• ograniczenia CSS – pamiętaj, że nie wszystkie właściwości dziedziczą się na komórki przez <col> (np. text-align), testuj w docelowych przeglądarkach.