Szczególną trudnością dla autorów stron WWW jest konieczność najlepszego wykorzystania przestrzeni ekranu. Pierwszym pomysłem, jaki przychodzi do głowy jest wykorzystanie tabeli jako ramy, na której rozpięte zostaną wszystkie składniki strony. Tak właśnie często używamy tabel. Popularność tabel w języku HTML opiera się na fakcie, że są one wykorzystywane najczęściej… niezgodnie z ich przeznaczeniem.
W czasach, gdy strony WWW cechowały się finezją i urodą rolki papieru toaletowego, na którym autor przedstawiał jedynie prosty, pozbawiony grafiki tekst, pojawienie się tabel było rewolucją. Niemal od razu zastosowano tabele jako narzędzie komponowania tekstu i grafiki na stronach WWW. Zarówno amatorscy autorzy nieskomplikowanych witryn jak też profesjonalni projektanci tworzący na potrzeby wielkich korporacji zazwyczaj nie używają tabel jako czytelnego sposobu prezentacji „związków i zależności między danymi i informacjami”, jak tego chcą oficjalne opisy języka HTML, lecz stosują je częściej do rozmieszczania na stronie dużych porcji tekstu, grafiki i pól formularzy. W tej roli tabele są już dobrze „oswojone” i zdecydowana większość przeglądarek, także tych mniej popularnych nie ma większych kłopotów w wyświetlaniu tabel i ich rozmaitej zawartości.
Tabela – wielka rama
Oto przykład układu strony zastosowaniem dużej tabeli – ramy. Przedstawiona propozycja nie jest bynajmniej najlepsza, ale możliwie uniwersalna, bowiem w stosunkowo zwartej postaci pozwala zaplanować na stronie możliwie dużo składników. Układ ten powinien być w miarę możliwości powielany na podstronach witryny, tak aby zachować czytelność kompozycji i łatwość nawigacji.
Strona od góry i od dołu ograniczona jest stałymi elementami – nagłówkiem i stopką, w których odpowiednio umieścić można logo lub baner i informacje o autorze strony z podaniem adresu e-mail. Te składniki witryny na każdej ze stron witryny powinny się powtarzać, być może z jakimiś drobnymi wariantami kolorystycznymi. W każdym razie są to miejsca, które najsilniej identyfikują autora strony i ich oryginalności należy poświęcić dużo uwagi.
Poniżej zaplanowany jest pasek nawigacyjny, który w wypadku rozbudowanych witryn może pełnić rolę „rozprowadzającą” po głównych sekcjach witryny. Wówczas menu z lewej strony będzie odsyłało do konkretnych podstron danej sekcji. Można też odwrotnie: lewe menu wskazuje na główne działy, wtedy pasek nawigacyjny (w każdym dziale z inną zawartością) będzie pomagał dotrzeć do stron na najniższym poziomie. Układ taki odzwierciedla drzewiastą strukturę witryny, schematycznie pokazaną poniżej:
Centralna część tabeli zarezerwowana jest na główną treść danej strony. Wewnątrz jej można dowolnie komponować dodatkowe obszary. Prawy pasek można zaplanować na odnośniki prowadzące do innych, zewnętrznych stron i witryn.
Opisany układ można łatwo zbudować w jednej tabeli i jeśli tylko strona nie będzie nadto „nafaszerowana” grafiką i dużymi partiami tekstu, to takie rozwiązanie jest zupełnie dobre. Jednak sprawa się komplikuje, gdy zaplanujemy umieszczenie sporej ilości grafiki, jeszcze inne tabele, a w nich następne… Przeglądarki nie lubią takich wielokrotnie zagnieżdżonych tabel, ich wyświetlanie trwa zwykle dłużej niż wyświetlanie zwykłego tekstu. Projektant może łatwo popełnić błąd przy domykaniu kolejnych poziomów tabel, kod staje się bardzo nieczytelny i zagmatwany. Trzeba też wspomnieć, że obecne wersje przeglądarek nie potrafią nadal „inteligentnie” czytać tabel, wyświetlają ich zawartość dopiero po załadowaniu treści ostatniej komórki. To sprawia, że użytkownik czasami bardzo długo czeka na pojawienie się strony w oknie przeglądarki.
Wiele tabel – ramek
Ale jest na to sposób. Można w takiej sytuacji powtarzać na stronie podobne tabele, gdzie każdy wiersz „dużej” tabeli pocięty jest do osobnej mniejszej tabeli. Ilustruje to kolejny schemat:
W ten sposób można znacznie przyspieszyć wyświetlanie strony. Oczywiście atrybuty kolejnych elementów <TABLE> muszą być identyczne w odniesieniu do szerokości tabel na stronie oraz szerokości i wysokości poszczególnych komórek. Aby zachować wrażenie spójności pomiędzy tabelami, należy atrybut border= ustawić na „0”, wówczas nie zostaną wyświetlone krawędzie tabel.
Marginesy
Tabela może doskonale służyć do budowy marginesów (osobiście wolę robić to za pomocą arkuszy stylów, ale to osobna historia). Jeśli zastosujemy tabelę jako ramę, to należy rozwiązać problem wyświetlania strony w różnych rozdzielczościach. Można zastosować dwa rozwiązania: płynne dostosowywanie rozkładu strony do dowolnej wielkości ekranu, lub sztywne ustawienie szerokości tabeli – ramy. W pierwszym przypadku tabela powinna zawierać atrybut width="100%", a szerokość poszczególnych kolumn również powinna być określona procentowo. Dobrze jest w takim układzie zaplanować dwie skrajne kolumny jako puste, co pozwala uzyskać światło marginesu. Drugie rozwiązanie wydaje się lepsze: tabele definiujemy na sztywno na szerokość ok. 600 – 620 pikseli (przy zakładanej najmniejszej rozdzielczości monitora 640/480 pikseli) i wszystkie obejmujemy „centrującym” DIV-em:
<HTML> <HEAD> <TITLE>wycentrowana tabela</TITLE> </HEAD> <BODY> <DIV ALIGN="center"> <TABLE WIDTH="620">.....</TABLE> <TABLE WIDTH="620">.....</TABLE> <TABLE WIDTH="620">.....</TABLE> </DIV> </BODY> </HTML>
Oczywiście „modelowo” przedstawione rozwiązanie nie jest bynajmniej takie proste. Należy także zadbać o „usztywnienie” szerokości poszczególnych komórek (a co za tym idzie – kolumn) tabeli. Można tu zastosować dwa rozwiązania: albo w komórkach użyć atrybutu width=, (nota bene niezalecanego przez specyfikację HTML 4.x – w odniesieniu do znacznika <TD> atrybut width= jest określony jako „deprecated”), albo komórkę rozepchać jednopikselowym, przeźroczystym GIF-em, który można następnie powiększyć na dowolną szerokość. Jest to rozwiązanie skuteczne, ale barbarzyńskie. Z dwojga złego polecam width=, chociaż od triku z przeźroczystym GIF-em czasami nie da się uciec.