<col>
Jedna lub kilka kolumn w grupie `<colgroup>`, do stylowania całej kolumny naraz.
- Wyświetlanie
- table-column
- Znacznik zamykający
- Brak, element pusty
- Dozwolona zawartość
- Brak, element pusty
Przykład
#<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; }
.recommended { background: #f9731633; }
</style>
<table>
<colgroup>
<col>
<col>
<col class="recommended">
</colgroup>
<tr><th scope="col">Funkcja</th><th scope="col">Start</th><th scope="col">Pro</th></tr>
<tr><th scope="row">Kursy</th><td>3</td><td>wszystkie</td></tr>
<tr><th scope="row">Mentor</th><td>nie</td><td>tak</td></tr>
</table>Definicja i zastosowanie
#Element <col> reprezentuje jedną kolumnę tabeli, a z atrybutem span kilka sąsiednich kolumn. Jest elementem pustym i stoi wewnątrz <colgroup>.
Nie zawiera żadnej treści, bo komórki i tak zapisujesz w wierszach <tr>. <col> służy tylko do tego, żeby nadać całej kolumnie klasę i ostylować ją naraz, na przykład tłem albo szerokością.
Obowiązują te same ograniczenia co przy <colgroup>: kolumna przyjmuje tylko background, border (przy scalonych krawędziach), width i visibility: collapse.
Składnia
#<colgroup>
<col span="2">
<col class="…">
</colgroup>Atrybuty
#liczba dodatnia (domyślnie 1)
Liczba sąsiednich kolumn, które obejmuje ten element. Zamiast pisać trzy takie same<col>, napiszesz jeden zspan="3".
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#span
liczba dodatnia (domyślnie 1)Liczba sąsiednich kolumn, które obejmuje ten element. Zamiast pisać trzy takie same <col>, napiszesz jeden z span="3".
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; }
.scores { background: #10b98126; }
</style>
<table>
<colgroup>
<col>
<col span="2" class="scores">
</colgroup>
<tr><th scope="col">Uczeń</th><th scope="col">HTML</th><th scope="col">CSS</th></tr>
<tr><th scope="row">Ola</th><td>9</td><td>8</td></tr>
</table>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
col {
display: table-column;
}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
#- Szerokość ustawiona na
<col>, na przykładwidth: 40%, razem ztable-layout: fixedna tabeli daje stabilny układ kolumn, niezależny od treści. - Obramowanie ustawione na
<col>pojawi się tylko przyborder-collapse: collapse.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.