Tabele
Wprowadzenie obsługi tabel w języku HTML spowodowało prawdziwą rewolucję. To właśnie dzięki tabelom strony nabrały ciekawego wyglądu i stały się bardziej przestrzenne niż dotychczas. W tym miejscu zaryzykuję twierdzenie, że tabele stały się tak popularne jako narzędzie wykorzystywane do budowania struktury strony, że w pewnym momencie „się przejadły”. Wraz z popularyzacją XHTML i CSS zaprzestano korzystania z tabel i zastąpiono je pozycjonowaniem elementów oraz warstwami. Takie podejście spowodowało znaczące odchudzenie kodu strony, poprawę szybkości wczytywania oraz umożliwiło realizację bardziej skomplikowanych projektów.
Zwróć uwagę, że już nie spotyka się stron, które składają się z jednej szpalty tekstu ciągnącego się w nieskończoność.
Dzisiaj niemal każdy projekt posiada kilka oddzielnych bloków, znajdujących się obok siebie. Przykładem takiej strony może być.
Jak widzisz na rysunku, tabel na pokazanej stronie użyto co najmniej kilka, a większość jest widoczna gołym okiem, bez zagłębiania się w kod strony.
Pomimo popularyzacji XHTML i CSS oraz coraz lepszej obsługi nowych rozwiązań we współczesnych przeglądarkach, nadal większość stron jest budowana przy wykorzystaniu tabel. We wnętrzu tabel znajdują się: tekst, grafika, formularze, a nawet inne tabele. Prawdę mówiąc, nawet moja strona domowa w chwili, gdy pracowałem nad drugim wydaniem niniejszej książki, też opierała się na tabelach. Na szczęście teraz, gdy czytasz te słowa, mogę Cię zapewnić, że to już się zmieniło.
Staraj się nie używać tabel do budowy struktury witryny. Obecnie masz znacznie lepsze i wydajniejsze techniki — XHTML i CSS. Tabel używaj wyłącznie do prezentacji tych danych, które tego faktycznie wymagają, np. mogą to być jakieś terminarze albo fragmenty arkuszy kalkulacyjnych.
Proste tabele
Każda tabela składa się z odpowiedniej kombinacji znaczników <table></table>, <tr></tr> oraz <td></td>. Dalej zamieszczam przykład prostej symetrycznej tabeli.
<body>
<table border=“1″>
<tr>
<td>Pierwsza komórka tabeli</td>
<td>Druga komórka tabeli </td>
</tr>
<tr>
<td>Trzecia komórka tabeli</td>
<td>Czwarta komórka tabeli </td>
</tr>
</table>
</body>
Konstrukcja tabeli jest stosunkowo prosta do opanowania, jednak wymaga, by każdy znacznik wprowadzać bardzo uważnie. Mała pomyłka, np. brak domknięcia znacznika, może spowodować błędne wyświetlenie całości.
Znacznik <table></table> określa ogólne ramy tabeli, natomiast za pomocą <tr></tr> wstawiamy jej wiersze. Każdy wiersz to jedna para znaczników <tr></tr>. Przykładowy listing zawiera dwie pary tych znaczników, co oznacza, że tabela ma dwa wiersze. Wewnątrz wiersza znajdują się komórki, które są tworzone za pomocą znacznika <td></td>. Jedna para znaczników odpowiada jednej komórce tabeli. Przykładowa tabela zawiera po dwie komórki w każdym wierszu, co oznacza, że ma ona dwa wiersze, a w każdym z nich dwie komórki. Pamiętaj, że w symetrycznej tabeli w każdym wierszu znajduje się dokładnie tyle samo komórek. Oczywiście nieco później dowiesz się, jak stworzyć tabele niesymetryczne o zróżnicowanej liczbie komórek w każdym wierszu.
Bardzo często przy tworzeniu tabel zdarza się, że jeden wiersz zawiera opis zawartości — nagłówek tabeli. Zazwyczaj chcemy, by ten element wyróżniał się na tle reszty, np. poprzez pogrubioną czcionkę i wyśrodkowany tekst. Na stronie WWW efekt ten można uzyskać, stosując zamiast znacznika <td></td> inny znacznik: <th></th>. Jedyna różnica polega na tym, że zawartość takiej komórki zostanie przedstawiona za pomocą pogrubionej czcionki i wyśrodkowanego tekstu. Stosowanie tego znacznika ma, również znaczenie, gdy chcesz w przyszłości upiększyć tabelę za pomocą kaskadowych arkuszy stylów.
Przy tworzeniu tabel warto korzystać z tzw. wcinania kodu — tak, jak to widać na listingach, gdyż dzięki temu znacznie łatwiej zapanować nad skomplikowanym projektem.
Zwróć uwagę na zawartość znacznika <table>, w którym rozmyślnie umieściłem atrybut border=”l”. Atrybut ten odpowiada za wyświetlanie obramowania tabeli. Jeżeli go nie wpiszesz, tabela będzie miała niewidoczne obramowanie. Brak atrybutu border jest równoznaczny z wpisem border=”0″. Stosowny przykład znajduje się poniżej.
<body>
<table>
<tr>
<td>Pierwsza komórka</td>
<td>Druga komórka</td>
</tr>
<tr>
<td>Trzecia komórka</td>
<td>Czwarta komórka</td>
</tr>
</table>
</body>
Na rysunku znajduje się wynik działania obu powyższych listingów.
Tabele widoczne na rysunku automatycznie dopasowują się do swojej zawartości. Jeżeli do tego samego kodu zamiast słów w komórkach wpiszesz dowolny pojedynczy znak, tabela automatycznie dopasuje się do zawartości.