Tabele

Zagnieżdżanie tabel

<table>
<tr>
	<td>
		<table>
		<tr>
			<td>...</td>
		</tr>
		</table>
	</td>
</tr>
</table>

Dzięki konstrukcji zagnieżdżania tabel, możliwe jest zbudowanie wielu tabel "jedna w drugiej". Tabele wewnętrzne znajdują się w komórkach tabeli zewnętrznej.

Zauważ, że w składni polecenia powyżej, tabela podrzędna jest bardziej wcięta (przesunięta w prawo) niż nadrzędna. Nie jest to konieczne, ale bardzo ułatwia tworzenie i czytanie kodu, dlatego polecam używanie takiego sposobu wpisywania.

Przykład:

Przedstawione poniżej przykłady nie są zalecane, ponieważ tabele nie zostały zaprojektowane do tworzenia efektów wizualnych ani struktury strony. Zaleca się stosowanie CSS.

Jedno z przydatnych zastosowań zagnieżdżania tabel:

A oto praktyczne wykorzystanie zagnieżdżania - budowa struktury strony (na biało zaznaczono tabele zagnieżdżone):

Kod, który należy wpisać, aby otrzymać ostatnią tabelę, jest następujący:

<table width="100%" cellspacing="0" cellpadding="5">
<tr>
	<td colspan="2" bgcolor="#808080">
		<table width="100%" cellspacing="0" cellpadding="5">
		<tr>
			<td align="center" valign="middle" bgcolor="white"> <br><b>LOGO</b><br /> </td>
		</tr>
		</table>
	</td>
</tr>
<tr>
	<td width="100" valign="top" bgcolor="#A0A0A0">
		<table width="100%" cellspacing="0" cellpadding="5">
		<tr>
			<td bgcolor="white"><b>MENU</b><br />- Link 1<br />- Link 2<br />- Link 3</td>
		</tr>
		</table>
		<br />
		<table width="100%" cellspacing="0" cellpadding="5">
		<tr>
			<td bgcolor="white"><b>MENU 2</b><br />- Link</td>
		</tr>
		</table>
	</td>
	<td valign="top" bgcolor="#C0C0C0">
		<table width="100%" cellspacing="0" cellpadding="5">
		<tr>
			<td height="100%" valign="top" bgcolor="white"><b>TREŚĆ STRONY</b><br /><br />Jakis tekst...</td>
		</tr>
		</table>
	</td>
</tr>
<tr>
	<td colspan="2" align="center" bgcolor="#808080">
		<table width="100%" cellspacing="0" cellpadding="3">
		<tr>
			<td align="center" valign="middle" bgcolor="white"><b>STOPKA</b></td>
		</tr>
		</table>
	</td>
</tr>
</table>

• Wewnętrzne krawędzie
• Quiz

• Do góry
• Strona główna
• Drukuj rozdział