Tabele#

Łączenie komórek#

Poziome łączenie komórek:

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

Pionowe łączenie komórek:

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

gdzie "ilość" oznacza liczbę komórek do połączenia w poziomie/pionie.

Podstawowy układ tabeli jest symetryczny - każdy wiersz i kolumna zawierają taką sama liczbę komórek, a każda komórka w wierszu i kolumnie posiada taki sam rozmiar. Można to oczywiście zmienić. Służą do tego atrybuty: rowspan i colspan. Pozwalają one łączyć (scalać) komórki zarówno w pionie jak i w poziomie.

Tabela z połączonymi komórkami zawiera mniej elementów (td, th) ponieważ komórka połączona rozciąga się na kilka zwykłych pojedynczych komórek, tym samym eliminując je. Każdy atrybut colspan lub rowspan eleminuje n-1 komórek pojedynczych (w przyległych kolumnach lub wierszach). Najlepiej zobaczyć wszystko na przykładach.

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

Łączenie poziome (colspan):

  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 colspan="2">A i B</th>
		<th>C</th>
	</tr>
	<tr>
		<th>1</th>
		<td colspan="2">Komórka1 i Komórka2</td>
		<td>Komórka2</td>
	</tr>
	<tr>
		<th>2</th>
		<td>Komórka4</td>
		<td>Komórka5</td>
		<td>Komórka6</td>
	</tr>
</table>

Efekt:

A i BC
1Komórka1 i Komórka2Komórka2
2Komórka4Komórka5Komórka6

Łączenie pionowe (rowspan):

  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 rowspan="2">1 i 2</th>
		<td rowspan="2">Komórka1 i Komórka4</td>
		<td>Komórka2</td>
		<td>Komórka3</td>
	</tr>
	<tr>
		<td>Komórka5</td>
		<td>Komórka6</td>
	</tr>
</table>

Efekt:

ABC
1 i 2Komórka1 i Komórka4Komórka2Komórka3
Komórka5Komórka6

Jak widać, łączenie (scalanie) komórek nie jest takie wygodne jak w przypadku popularnych edytorów tekstowych. Część oprogramowania przeznaczonego do tworzenia WWW posiada edytory wizualne, które ułatwiają cały proces.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Tabele (H1) Łączenie komórek (H2)