Zagnieżdżanie tabel

Na pewno pamiętasz, w jaki sposób zagnieżdżaliśmy listy. Teraz te wiadomości się przydadzą, ponieważ zasada zagnieżdżania tabel jest dokładnie taka sama. Poniżej zamieszczam prosty przykład tabeli zagnieżdżonej wewnątrz komórki innej tabeli. W listingu umieściłem dodatkowo komentarze, dzięki czemu będzie Ci znacznie łatwiej zrozumieć, gdzie zaczyna się i gdzie kończy tabela. Rysunek przedstawia uzyskany efekt.

<!— POCZĄTEK GŁÓWNEJ TABELI —>
<table border=”1″>
<tr>
<td>
<!— POCZĄTEK PIERWSZEJ ZAGNIEŻDŻONEJ TABELI —>
<table border-„1″ width=”200″ height=”200″>
<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td colspan=”2″>3</td>
</tr>
</table>
<!— KONIEC PIERWSZEJ ZAGNIEŻDŻONEJ TABELI —>
</td>
<td>
<!— POCZĄTEK DRUGIEJ ZAGNIEŻDŻONEJ TABELI —>
<table border=”1″ width=“200″ height=“200″>
<tr>
<td rowspan=”2”>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
<!— KONIEC DRUGIEJ ZAGNIEŻDŻONEJ TABELI —>
</td>
</tr>
</table>
<!— KONIEC GŁÓWNEJ TABELI —>

Mam nadzieję, że zrozumiałeś, o co chodzi. Pamiętaj jednak, że zbyt dużo zagnieżdżonych tabel na stronie może spowodować spore zamieszanie oraz znaczne zwiększenie objętości pliku. Starsze przeglądarki charakteryzowały się ciekawym podejściem do tabel: otóż wczytywały one strony i w chwili, gdy napotkały znacznik <table></table>, czekały na odpowiedni znacznik zamykający i dopiero wtedy pokazywały zawartość tabeli. W związku z tym, nawet gdy przeglądarka wczytała już całą zagnieżdżoną tabelę, to nie wyświetlała jej do chwili, gdy nie został pobrany z sieci ostatni znacznik zamykający tabeli nadrzędnej. W efekcie oglądający miał wrażenie, że strona wczytuje się bardzo powoli.

Jeszcze raz pragnę zachęcić Cię do porzucenia pomysłu stosowania tabeli do budowy struktury witryny. Sięgnij po znacznie lepsze i wygodniejsze rozwiązanie, jakim jest język XHTML i kaskadowe arkusze stylów. Konkretne przykłady zastosowania nowych możliwości znajdziesz w kolejnych rozdziałach.