(Pierwsza publikacja tego artykułu: rok 1998)
Goście naszych witryn traktują tabele jako płaskie konstrukcje opisane przez liczbę wierszy i kolumn. Bo czyż tak nie jest? Proszę spojrzeć na ilustrację poniżej: dwuwymiarowa tablica zdaje się zupełnie nie wskazywać, że cokolwiek „ukrywa”.
Z kolei autorzy stron zdają sobie sprawę, że tabele to konstrukcje bynajmniej nie płaskie, lecz wielowarstwowe. Nawet w najprostszym przypadku tabela składa się z minimum trzech poziomów: poziomu głównej ramy tabeli, poziomu wierszy i poziomu komórek danych. Jednak w istocie tabele mogą być bardziej rozbudowane.
Budowa tabel
Hierarchiczną budowę tabel najłatwiej ukazać, gdy porzucimy tradycyjne metody ich formatowania na rzecz wykorzystania własności stylowych (CSS). Widać wówczas wyraźnie, jak poszczególne składniki tabel zależą od siebie i jak jedne są nadrzędne/podrzędne wobec innych.
- Na najniższym poziomie jest warstwa ramy tabeli. Jeśli elementowi <TABLE> przypiszemy określone atrybuty (kolor tła, styl fontu itd.), to wszystkie warstwy ulokowane ponad tym poziomem odziedziczą te własności. Każda następna warstwa może być wyposażona we własny zbiór atrybutów, które pokryją własności niżej zdefiniowane.
- Składniki tabel – kolumny i wiersze możemy grupować. Tak więc ponad warstwą tabeli znajduje się warstwa grupy kolumn definiowana za pomocą znacznika <COLGROUP>.
- Grupa kolumn składa się z poszczególnych kolumn wyznaczanych za pomocą <COL>. Każdej z osobna kolumnie danych można przypisać dowolne atrybuty wyglądu.
- Ponad warstwą kolumn znajduje się warstwa grup wierszy, które mogą być definiowane dla nagłówka i stopki (odpowiednio: <THEAD> i <TFOOT>) oraz dla zasadniczego korpusu tabeli <TBODY>. Liczba elementów <TBODY> w tabeli nie jest ograniczona – to pozwala różnicować format poszczególnych wierszy (lub grup wierszy). Podział tabeli na grupy wierszy będzie miał jeszcze większe znaczenie w przyszłości, kiedy przeglądarki będą potrafiły wyświetlać nieruchome nagłówki i stopki tabel, a użytkownik będzie mógł przewijać jedynie zawartość tabeli.
- Każda grupa wierszy składa się z dowolnej liczby wierszy wyznaczonych przez <TR>. Pojedyncze wiersze w ramach grupy wierszy mogą oczywiście posiadać własne atrybuty wyglądu.
- Na najwyższym, szóstym poziomie znajdujemy komórki danych , czyli dobrze znane <TD>. Tu również swoje miejsce ma element <TH>, który jest stosowany do oznaczania komórek nagłówków tabel. W hierarchii elementów <TH> jest równoważny <TD>, różni się jednak tym, że większość przeglądarek standardowo formatuje zawartość komórki oznaczonej <TH> jako wytłuszczoną oraz wyśrodkowaną w poziomie.
Pojedyncza komórka tabeli będzie sformatowana zgodnie ze stylem domyślnym przeglądarki lub zgodnie ze stylem zdefiniowanym na najniższym poziomie – jeśli „po drodze”, nic nie zmienialiśmy. Jeśli na wyższych poziomach modyfikowaliśmy atrybuty wyglądu, to dane w komórce będą „spadkobiercą” tych zmian. Zobaczmy, jak to wygląda, gdy rozpiszemy powyższy opis na kod HTML.
Poniższy przykład warto skopiować, wkleić do dowolnego edytora tekstowego i zapisać jako dokument HTML. Obraz tabeli w przeglądarce MSIE oraz Firefox będzie bardzo zbliżony do ilustracji umieszczonej na początku artykułu. Zobacz.
Jednak należy powyższy przykład mimo wszystko traktować z rezerwą, gdyż co prawda przy zastosowaniu arkuszy stylów można zdefiniować dowolną własność tabeli (szerokość i wysokość komórki, wiersza, kolumny, całej tabeli, tła, krawędzie, marginesy, odstępy komórek itd.) i najnowsze specyfikacje języka HTML rekomendują tę metodę, to jednak długo poczekamy na chwilę, gdy wszystkie przeglądarki będą akceptowały taki sposób formatowania tabel. Choć wygoda skorzystania z arkuszy stylów wydaje się bardzo kusząca, to dbałość o to, aby każdy z użytkowników ujrzał jednakowy efekt naszej pracy, niezależnie od posiadanej przeglądarki, każe odesłać do Kursu HTML, gdzie opisane są wszystkie atrybuty stosowane w tradycyjnym sposobie formatowania tabel.