Przejdź do treści

Tabele - HTML

Łączenie kolumn tabeli w grupy <colgroup, col>

W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?

Chrome Firefox Edge Opera Safari

Grupa kolumn <colgroup>

<table>
<colgroup span="x"></colgroup>
<tr>...</tr>
</table>
gdzie "x" oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut 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órka1komórka2komórka3
komórka4komórka5komó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órka1komórka2komórka3komó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".

Komentarze

Zobacz więcej komentarzy

Facebook