Tabele

Kolejnym sposobem prezentowania i grupowania danych w języku HTML jest tabela. Sposób prezentowania danych w tabeli html jest taki sam jak w każdej innej tabeli, którą znamy z życia codziennego.

Korzystanie z tabel jest bardzo proste, potrzebne są nam do tego zaledwie 4 znaczniki: table, tr, td, th

Tak wygląda tabela:

1.1	1.2	1.3
2.1	2.2	2.3

A tak wygląda jej kod:

<table border="1px">		- ramy tabeli
	<tr>					- początek wiersza
		<td> 1.1 </td>		- pierwsza komórka wiersza
		<td> 1.2 </td>		- druga komórka wiersza
		<td> 1.3 </td>		- trzecia komórka wiersza
	</tr>					- koniec wiersza
	<tr>					- początek drugiego wiersza
		<td> 2.1 </td>
		<td> 2.2 </td>
		<td> 2.3 </td>
	</tr>
</table>						
					

---

Trzeba również powiedzieć o tym jak można scalać ze sobą komórki kolumnami oraz wierszami

Tak wygląda scalanie wierszami

1.1		1.2
2.1	2.2	2.3

A tak scalanie kolumnami

1.1	1.2	1.3
	2.2	2.3

Nic nie stoi również na przeszkodzie aby połączyć to ze sobą

1.1		1.3
		2.3
3.1	3.2	3.3

Używamy do tego dwóch atrybutów: colspan - do łączenia wierszami oraz rowspan - do łączenia kolumnami. Poniżej kod trzech tabelek znajdujących się wyżej:

						<table border="1px">
							<tr>
								<td colspan="2"> 1.1 </td>
								<td> 1.2 </td>
							</tr>
							<tr>
								<td> 2.1 </td>
								<td> 2.2 </td>
								<td> 2.3 </td>
							</tr>
						</table>
						
						
						<table border="1px">
							<tr>
								<td rowspan="2"> 1.1 </td>
								<td> 1.2 </td>
								<td> 1.3 </td>
							</tr>
							<tr>
								<td> 2.2 </td>
								<td> 2.3 </td>
							</tr>
						</table>
						
						<table border="1px">
							<tr>
								<td rowspan="2" colspan="2"> 1.1 </td>
								<td> 1.3 </td>
							</tr>
							<tr>
								<td> 2.3 </td>
							</tr>
							<tr>
								<td> 3.1 </td>
								<td> 3.2 </td>
								<td> 3.3 </td>
							</tr>
						</table>
					

Należy pamiętać aby w kodzie usunąć tą komórkę która ma zostać scalona z wcześniejszą