Kurs HTML i CSS

Tabele

Kolejną rzeczą jaką przydałoby się omówić są tabele.

Tabele

Każda tabela składa się z odpowiedniej kombinacji znaczników <table></table>,<tr></tr> oraz <td></td>.Konstrukcja tabeli jest stosunkowo prosta do opanowania, jednak wymaga, by każdy znacznik wprowadzić bardzo uażnie.

Oto przykładowa tabela:

1.1 1.2 1.3
2.1 2.2 2.3

A to kod tej tabeli:

<table border="1">			- 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>						
					

Miejsca w tabelach można ze sobą łączyć, do tego służą dwa atrybuty colspan- odpowiedzialny za łączenie wierszami oraz rowspan- odpowiedzialny za łączenie kolumnami

Scalanie wierszami

Przykład tabeli:

1.1 1.2
2.1 2.2 2.3

Kod tabeli:

		<table border="1">
			<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>
					

Scalanie kolumnami

Przykład tabeli:

1.1 1.2 1.3
2.2 2.3

Kod tabeli:

		<table border="1">
			<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>
					

Połączone scalanie

Przykład tabeli:

1.1 1.3
2.3
3.1 3.2 3.3

Kod tabeli:

		<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>