Tabele - HTML
Łączenie kolumn tabeli w grupy <colgroup, col>
W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?
Grupa kolumn <colgroup>
<table> <colgroup span="x"></colgroup> <tr>...</tr> </table>
span="..."
, przyjmie on domyślną wartość "1".Łączenie kolumn w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie np. określone formatowanie za pomocą CSS.
W grupę można połączyć dowolną liczbę kolumn. W jednej tabeli może istnieć kilka grup.
Przykład <colgroup>
Po wpisaniu:
<table> <colgroup span="1" style="background-color: red"></colgroup> <tr> <td>komórka1</td> <td>komórka2</td> <td>komórka3</td> </tr> <tr> <td>komórka4</td> <td>komórka5</td> <td>komórka6</td> </tr> </table>
otrzymamy:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
Kolumna <colgroup, col>
Znacznik <colgroup>...</colgroup> łączy kolumny tabeli strukturalnie. Jeśli chcemy nadać dodatkowe atrybuty poszczególnym kolumnom, należy wewnątrz takiej grupy użyć znaczników <col>
. Odpowiadają one za pojedynczą kolumnę, co pozwala nadać jej określone atrybuty, bez dodatkowego łączenia kolumn w grupy:
<table> <colgroup span="3" style="background-color: green"> <col style="background-color: red"> <col span="2"> </colgroup> <tr> <td>komórka1</td> <td>komórka2</td> <td>komórka3</td> <td>komórka4</td> </tr> </table>
Przykład <colgroup, col>
Zauważ, że formatowanie nadane pojedynczym kolumnom (<col>
) nadpisuje to, które zostało określone dla grupy kolumn (<colgroup>...</colgroup>
):
komórka1 | komórka2 | komórka3 | komórka4 |
UWAGA! W każdej grupie kolumn (<colgroup>...</colgroup>
) musi być tyle znaczników <col>
, ile wskazuje atrybut span="..."
, nadany całej grupie, chyba że również dla znacznika <col>
nadamy ten atrybut. Nawet jeśli kolumna nie wprowadza żadnych atrybutów, musi się znaleźć na liście, w przeciwnym razie tabela zostanie błędnie wyświetlona!
Jeśli nie podamy atrybutu span="..."
(dla grupy lub kolumny), zostanie przyjęta jego domyślna wartość, równa "1".