Tabele#

Grupy kolumn#

Wydzielenie grupy kolumn:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table>
	<colgroup span="ilość">...</colgroup>
	...
	<tr>
		<th>...</th>
		<td>...</td>
	</tr>
	...
</table>

Wydzielenie poszczególnych kolumn w grupie kolumn:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table>
	<colgroup span="ilość">
		<col span="ilość">
		...
	</colgroup>
	...
	<tr>
		<th>...</th>
		<td>...</td>
	</tr>
	...
</table>

gdzie "ilość" oznacza liczbę kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut span, przyjmie on domyślną wartość "1".

W tabeli (zaraz za poleceniem <table>), przy użyciu elementu colgroup można łączyć kolumny strukturalnie. Takie wydzielenie umożliwia odnoszenie się do utworzonej grupy jako do całości (np. w celu nadania unikalnych stylów lub atrybutów). Jeśli chcemy określić odrębne formatowanie dla pojedynczej kolumny lub kolumn w danej grupie należy zastosować polecenie col. W grupę można połączyć dowolną liczbę kolumn. W jednej tabeli może istnieć kilka grup.

Element col można umieszczać tylko wewnątrz znaczników <colgroup>...</colgropu>.

W każdej grupie kolumn (<colgroup>...</colgropu>) musi być tyle elementów col, ile wskazuje atrybut span="...", nadany całej grupie, chyba że również dla elementu 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!

Obsługa poleceń colgroup i col w przeglądarkach jest problematyczna. Starsze browsery nie wspierają opisywanych poleceń. Nowsze programy (np. Firefox 4, Opera 9 i Chrome 5) nie mają problemów z formatowaniem grup za pomocą atrybutów (np. align, valign itd.). Jeśli chodzi o CSS (inline) jest dużo gorzej. U mnie zadziałały tylko polecenie tła: background-color i background-image.

Tabela bez łączenia:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="1" style="width: 500px; height: 150px;">
	<tr>
		<th></th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
	</tr>
	<tr>
		<th>1</th>
		<td>Komórka1</td>
		<td>Komórka2</td>
		<td>Komórka3</td>
	</tr>
	<tr>
		<th>2</th>
		<td>Komórka4</td>
		<td>Komórka5</td>
		<td>Komórka6</td>
	</tr>
</table>

Efekt:

ABC
1Komórka1Komórka2Komórka3
2Komórka4Komórka5Komórka6

Tabela z wydzielonymi grupami kolumn:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="1" style="width: 500px; height: 150px;">
	<colgroup style="background-color: yellow;"></colgroup>
	<colgroup span="3" align="right">
		<col span="2" style="background-color: lime;" />
		<col span="1" style="background-image: url(../../pliki/html/tabele/tloobrazkowe/tlo3.gif);"></col>
	</colgroup>
	<tr>
		<th></th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
	</tr>
	<tr>
		<th>1</th>
		<td>Komórka1</td>
		<td>Komórka2</td>
		<td>Komórka3</td>
	</tr>
	<tr>
		<th>2</th>
		<td>Komórka4</td>
		<td>Komórka5</td>
		<td>Komórka6</td>
	</tr>
</table>

Efekt:

ABC
1Komórka1Komórka2Komórka3
2Komórka4Komórka5Komórka6

W grupy można łączyć również wiersze (tr), służą do tego celu elementy thead, tfoot, tbody opisane przy omawianiu złożonego szkieletu tabeli.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Tabele (H1) Grupy kolumn (H2)