Rozdział 11. u Tabele              329

Rozdział 11.
Tabele

We wszystkich przykładach podanych do tej pory poszczególne elementy były rozmieszczane na stronie przy użyciu bardzo prostego kodu HTML. Choć można sobie poradzić, wykorzystując wyłącznie akapity i listy, to jednak istnieje jeszcze inny sposób prezentowania informacji i zawartości stron WWW. Dzięki wykorzystaniu tabel można rozmieścić zawartość strony w wierszach i kolumnach, które mogą, lecz nie muszą, mieć obramowań. Co więcej, zawartość tabel nie musi ograniczać się wyłącznie do tekstu. W tabelach można bowiem umieszczać dowolny kod HTML (na przykład: obrazy, połączenia, formularze, itd.) co sprawia, że zapewniają one możliwość ścisłej kontroli wyglądu strony.

Tabele zostały oficjalnie wprowadzone w HTML-u 3.2. Od tej pory wywarły ogromny wpływ na sposób projektowania i tworzenia stron WWW. W wersji 4.0 HTML-a zostały wprowadzone zmiany ulepszające sposób ładowania i wyświetlania tabel w przeglądarkach. Dzięki nim autorzy stron WWW mogą tworzyć tabele wyświetlane w sposób przyrostowy lub tabele, których zawartość jest bardziej dostępna dla osób korzy­stających z przeglądarek prezentujących strony w sposób inny niż wizualny. Dodatkowe elementy tworzą tabele ze stałymi nagłówkami i stopkami, ułatwiającymi prezentację większych tabel na kilku stronach (na przykład, na wydruku).

Ten rozdział jest poświęcony właśnie tabelom. Oto szczegółowa tematyka:

n   definicja tabeli,

n   definiowanie tabel w HTML-u,

n   tworzenie podpisów, wierszy oraz komórek nagłówka i danych,

n   modyfikowanie sposobu wyrównania zawartości komórki,

n   tworzenie komórek rozpiętych na wielu wierszach lub kolumnach,

n   dodawanie koloru,

n   w jaki sposób korzystać z tabel w prezentacji WWW.

Definicja tabeli

Wprowadzenie tabel przez firmę Netscape na początku 1995 roku niemal od razu zrewolucjonizowało sposób projektowania stron WWW i to nie tylko dlatego, że tabele pozwalały na prezentację danych w formie tabelarycznej, lecz przede wszystkim ze względu na znacznie większą kontrolę nad układem strony i rozmieszczeniem poszczególnych jej elementów, jaką tabele dają projektantom stron WWW.

Teraz w HTML-u 4.0 specyfikacja tabel zawiera wiele cech, które można określać przy wykorzystaniu arkuszy stylów przedstawionych w rozdziale 10. „XHTML i arkusze stylów”. Choć opracowywanie specyfikacji HTML 4.0 zostało już zakończone, to jednak twórcy przeglądarek, na przykład, firmy Microsoft oraz Netscape, wciąż dodają nowe możliwości, implementując je w swoich produktach.

Projektując własne tabele, miej więc na uwadze, że one ciągle ewoluują. Choć jest mało prawdopodobne, by to, co projektujesz dziś, jutro nie nadawało się do niczego, ale niewątpliwie czekają nas zmiany. Pamiętając o tym drobnym ostrzeżeniu, zabierzmy się do pracy.

Tworzenie tabel

Aby utworzyć tabelę w HTML-u, określasz jej elementy i ich umiejscowienie, a wszystko otaczasz znacznikiem definiującym tabelę. Następnie poprawiasz wygląd całości za pomocą wyrównania, obramowań i kolorowych komórek. W tym podrozdziale nauczysz się tworzyć proste tabele danych, zaopatrzone w nagłówek i podpis.

Jeszcze jedna uwaga. Ręczne tworzenie tabel w HTML-u nie jest zabawne. Kody HTML tworzące tabelę zostały zaprojektowane pod kątem współpracy z programami generującymi tabele, a nie do ręcznego kreowania tabel. Musisz się liczyć z tym, że czeka Cię wiele eksperymentowania, testowania i wędrówek przeglądarka — kod źródłowy, zanim osiągniesz pozytywny rezultat. Niezwykle pomocne mogą być edytory HTML; spełniają one bowiem początkowo rolę tekstowego edytora tabel, a potem arkusza, pozwalającego zorientować się w układzie tabeli. Proponuję jednak, by rozpocząć od ręcznego utworzenia tabeli, abyś zorientował się, jak one działają.

Części tabeli

Zanim zajmiemy się kodem tworzącym tabelę, zapoznam Cię z kilkoma terminami, abyśmy oboje wiedzieli o czym rozmawiamy.

n   Podpis — informuje o zawartości tabeli, na przykład, „Statystyczny rozkład głosów z lat 1950-94” lub „Liczba zabawek przypadająca na jeden pokój w mieszkaniu przy ulicy Bałagańskiego 123”. Podpisy są opcjonalne.

n   Nagłówki tabeli — to etykiety wierszy i (lub) kolumn. Nagłówki są zazwyczaj wyświetlane czcionką większą lub w pewien sposób wyróżnioną w stosunku do reszty tekstu tabeli. Są one również opcjonalne.

n   Komórki tabeli — to najmniejsze jej elementy. Komórka może zawierać dane lub nagłówek.

n   Dane tabeli — to wartości wpisane w samą tabelę. Nagłówki i dane to tabela.

Na rysunku 11.1 pokazana jest typowa tabela i jej elementy.

Podpis Komórki Dane Nagłówki Rysunek 11.1. Części tabeli

Znacznik <TABLE>

Aby za pomocą kodów języka HTML utworzyć tabelę, stosujesz element <TABLE> ¼</TABLE>, który zawiera kod podpisu tabeli i samą jej definicję:

<table>

¼ tytuł tabeli (opcjonalny) i jej zawartość ¼

</table>

Aby pokazać, jak wygląda kod HTML kompletnej tabeli, na poniższym przykładzie przedstawię kod tabeli z rysunku 11.1. Nie martw się, jeśli nie będziesz jeszcze w stanie zrozumieć jego znaczenia. Jak na razie wystarczy, byś zwrócił uwagę na to, iż tabela rozpoczyna się znacznikiem <TABLE> zawierającym dodatkowe atrybuty, a kończy znacznikiem </TABLE>.

<table border="1">

<caption>Podstawowa statystyka</caption>

  <tr>

    <th>Imię</th>

    <th>Wzrost</th>

    <th>Waga</th>

    <th>Kolor oczu</th>

  </tr>

  <tr>

    <td>Alicja</td>

    <td>171</td>

    <td>57</td>

    <td>niebieski</td>

  </tr>

  <tr>

    <td>Tomek</td>

    <td>185</td>

    <td>82</td>

    <td>chabrowe</td>

  </tr>

  <tr>

    <td>Zuzanna</td>

    <td>160</td>

    <td>52</td>

    <td>brązowe</td>

  </tr>

</table>

Wiersze i komórki

Teraz, kiedy poznałeś już element <TABLE> zajmiemy się kolejnym zagadnieniem, którym są wiersze i komórki. Wewnątrz elementu <TABLE>¼</TABLE> umieszczana jest zawartość tabeli. W języku HTML tabele definiowane są wiersz po wierszu, a każdy z nich zawiera definicje wszystkich komórek w nim zawartych. Tak więc, aby zdefiniować tabelę, musisz rozpocząć od górnego wiersza i w nim określić wszystkie komórki, następnie drugi wiersz i jego komórki, itd. Kolumny obliczane są automatycznie, w oparciu o liczbę komórek w każdym z wierszy.

Wiersz jest tworzony za pomocą znacznika otwierającego <TR> i znacznika zamykającego </TR>. Z kolei każdy z wierszy ma swoje komórki, które definiowane są za pomocą pary znaczników <TH>¼</TH> (w przypadku komórek nagłówka) i pary <TD>¼</TD> (dla komórek danych). Liczba wierszy nie jest ograniczona, również nie ma ograniczeń liczby komórek w wierszu, zależy ona jedynie od tego, ile kolumn jest Ci potrzebnych. Musisz zadbać tylko o to, by każdy wiersz miał tę samą liczbę komórek, wynika to z liczby kolumn.

Komórki umieszczone w wierszach tabeli są oznaczane przy użyciu dwóch elementów.

n   <TH>¼</TH> — te elementy są używane do tworzenia komórek nagłówka. Nagłówki są zazwyczaj wyświetlane w inny sposób niż pozostałe komórki tabeli (na przykład, pogrubioną czcionką) i powinny być zamykane znacznikiem </TH>;

n   <TD>¼</TD> — te elementy są używane do tworzenia komórek danych. Litery „td” to skrót od słów „table data”, czyli dane (zawartość) tabeli. Każda komórka tabeli rozpoczynająca się znacznikiem <TD> powinna zostać zakończona znacznikiem </TD>.

W przedstawionym wcześniej przykładzie, komórki nagłówka zostały umieszczone w pierwszym wierszu tabeli, a definiuje je następujący fragment kodu:

  <tr>

    <th>Imię</th>

    <th>Wzrost</th>

    <th>Waga</th>

    <th>Kolor oczu</th>

  </tr>

Po nagłówku w tabeli zostały umieszczone trzy wiersze składające się ze zwyczajnych komórek:

<tr>

    <td>Alicja</td>

    <td>171</td>

    <td>57</td>

    <td>niebieski</td>

  </tr>

  <tr>

    <td>Tomek</td>

   <td>185</td>

    <td>82</td>

    <td>chabrowe</td>

  </tr>

  <tr>

    <td>Zuzanna</td>

    <td>160</td>

    <td>52</td>

    <td>brązowe</td>

  </tr>

Jak pokazałam na wcześniejszym przykładzie, nagłówki można wyświetlić na samej górze tabeli, umieszczając je w jej pierwszym wierszu. Wprowadźmy jednak pewne modyfikacje w naszym przykładzie. Tym razem umieścimy nagłówki wzdłuż lewej krawędzi tabeli. W tym celu należy umieścić znaczniki <TH> jako pierwszą komórkę każdego wiersza tabeli. Po każdym z nagłówków trzeba wprowadzić odpowiednie komórki z informacjami. Zmodyfikowany kod tabeli ma następującą postać.

Na rysunku 11.2 możesz zobaczyć zmodyfikowaną tabelę.

Puste komórki

Wszystkie komórki tabeli, zarówno komórki nagłówka, jak i komórki danych – mogą zawierać tekst oraz kod HTML (w tym: listy, połączenia, formularze, a nawet inne tabele). A co w przypadku, gdy chcesz utworzyć komórkę, w której nic nie ma? To proste. Definiu­jesz komórkę za pomocą elementów <TH> lub <TD> i nic nie umieszczasz wewnątrz:

<table border="1">
<tr>

   <td></td >

   <td>10</td >

   <td>20</td >

</tr>
</table>

Niektóre przeglądarki wyświetlają puste komórki tego rodzaju w taki sposób, jakby w ogóle nie istniały. Jeśli chcesz zmusić przeglądarkę, by naprawdę wyświetliła pustą komórkę, możesz w definicji komórki umieścić samo złamanie wiersza.

<table border="1">
<tr>

   <td><br /></td>

   <td>10</td>

   <td>20</td>

</tr>
</table>

Rysunek 11.3 przedstawia oba rodzaje pustych komórek: puste komórki oraz naprawdę puste komórki zawierające złamanie wiersza.

Podpisy

Podpisy tabeli informują czytelnika o tym, czego dotyczy tabela. Do tworzenia podpisów służy element <CAPTION> zaprojektowany specjalnie w tym celu. Wyświetla on tytuł tabeli w formie podpisu. Chociaż mógłbyś zastosować zwykły akapit lub nagłówek jako etykietę tabeli, istnieje przecież element <CAPTION> służący właśnie do tego celu. Ponieważ elementy <CAPTION> nadają podpisom etykiety podpisów, narzędzia obróbki plików HTML mogą wybrać je i utworzyć z nich osobny plik, automatycznie je ponumerować lub potraktować w specjalny sposób tylko dlatego, że są podpisami.

A jeżeli nie chcesz podpisywać tabeli? To nie musisz — podpisy są opcjonalne. Jeśli potrzebna Ci tylko tabela, nie przejmuj się podpisem i nie wprowadzaj go.

Element <CAPTION> umieszczany jest obrębie elementu <TABLE>, przed definicjami wierszy i zawiera tytuł tabeli. Kończy się zamykającym znacznikiem </CAPTION>.

<table>

<caption> Podstawowa statystyka</caption>

<tr>

Ćwiczenie 11.1: Utwórz prostą tabelę

Poznałeś podstawy tworzenia tabeli, spróbuj więc zastosować je w praktyce. W tym przy­kładzie utworzymy tabelę, informującą o tym, jakie kolory uzyskasz, mieszając trzy podsta­wowe składniki.

Rysunek 11.4 prezentuje tabelę, której tworzeniem będziemy się zajmowali w tym przykładzie.

Oto przydatna podpowiedź ułatwiająca tworzenie tabel: ponieważ w HTML-u tabela definiowana jest wiersz po wierszu, czasami trudno jest śledzić układ kolumn, szczególnie w przypadku tabel o skomplikowanej konstrukcji.