Autor: dombek
Tabele to częsty problem dla początkujących webmajstrów, czego autor doświadczył na własnej skórze. W tym artku zostanie przybliżony jeden z aspektów pracy z tabelami – jak ich struktura wpływa na szybkość ładowania się strony w przeglądarce.
Niniejszy artykulik to efekt doświadczeń początkującego webmajstra, którymi autor chciałby się podzielić z innymi początkującymi. Problem dotyczy układu tabel na stronie i uzależnionego od nich czasu ładowania się strony w przeglądarce. Tabele nie są kłopotliwe dla tych, którzy choć kilka razy je przećwiczyli, natomiast na samym początku potrafią sprawić przykre niespodzianki.
Jak sami możemy się przekonać podglądając kod źródłowy różnych stron, są one często oparte na następującym układzie tabel:
<BODY>
<TABLE>
<TR>
<TD>
<TABLE>
<TR>
<TD>
nagłówek (poziomy panel tytułowy strony)
</TD>
</TR>
<TR>
<TD>
<TABLE>
<TR>
<TD>menu poziome</TD>
</TR>
<TR>
<TD>
<TABLE>
<TR>
<TD> boczne menu pionowe z lewej str. ekranu (czyli kolejna
tabelka, której definicję już pominiemy)
</TD>
<TD>treść właściwa</TD>
<TD>boczny panel pionowy z prawej str. ekranu
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>stopka strony</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
Jak widać w powyższym przykładzie mamy do czynienia z szeregiem tabel zagnieżdżonych jedna w drugiej.
Minusem takiego rozwiązania jest fakt, że strona w przeglądarce internauty będzie niewidoczna tak długo, aż się cała nie załaduje – w efekcie internauta znudzony oczekiwaniem na jej załadowanie może zwyczajnie posurfować gdzieś indziej. Wynika to z hierarchi znaczników HTML: przeglądarka ładuje najpierw pierwszą tabelę i to, co jest w jej komórkach – czyli wg powyższego przykładu kolejną tabelę z jej zawartością itd. Dopóki przeglądarka nie „dotrze” do ostatniego znacznika zamykającego najwcześniej otwartą tabelę (czyli ostatniego znacznika /TABLE) – strona będzie pusta.
Dlatego warto poszczególne elementy w sposób logiczny podzielić na osobne tabelki, przy czym chyba najodpowiedniejszym i przeważnie stosowanym układem jest układ poziomych tabel, np.:
<BODY>
<TABLE>
<TR>
<TD>nagłówek strony</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD>menu poziome</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD>
<TABLE>
<TR>
<TD>boczne menu pionowe
</TD>
</TR>
<TR>
<TD>...jakaś pozycja menu</TD>
</TR>
<TR>
<TD>...i kolejna poz. menu</TD>
</TR>
</TABLE>
</TD>
<TD>treść właściwa</TD>
<TD>boczny panel z prawej str.ekranu (może to też być tabelka, jak w
przypadku pionowego menu z lewej str. ekranu)
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD>stopka strony</TD>
</TR>
</TABLE>
</BODY>
Co wynika z takiego układu ? Najpierw do przeglądarki załaduje się pierwsza tabelka z nagłówkiem strony. Potem zacznie ładować się druga tabela z poziomym menu. Następnie trzecia z pionowym menu i treścią strony (w tym czasie nagłówek strony i poziome menu będą już widoczne, internauta będzie widział, że „coś się dzieje” i nie ucieknie zrażony oczekiwaniem na załadowanie całej strony). Na końcu zostanie załadowana stopka strony.
Tak więc widzimy, że ten sam wygląd stronki możemy osiągnąć stosując różną strukturę tabel, jednak sama strona w każdym przypadku zostanie inaczej załadowana przez przeglądarkę. Może to nie mieć znaczenia w przypadku stron o małej ilości treści, wyobraźmy jednak sobie serwis dłuugi na kilka ekranów (jak choćby niniejszy, „pajączkowy”), którego elementy byłyby objęte w tabele, które są zagnieżdżone w kolejnych nadrzędnych tabelach, które są zagnieżdżone w jednej wielkiej tabeli obejmującej całą stronę – taka strona ładowałaby się i ładowała…i ładowała…
Polecam więc przećwiczenie różnych układów tabelek i sprawdzenie jak zachowują się zbudowane na nich stronki. Powodzenia !
Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.