R 11 07, HTML
[ Pobierz całość w formacie PDF ]
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:
definicja tabeli,
definiowanie tabel w HTML-u,
tworzenie podpisów, wierszy oraz komórek nagłówka i danych,
modyfikowanie sposobu wyrównania zawartości komórki,
tworzenie komórek rozpiętych na wielu wierszach lub kolumnach,
dodawanie koloru,
w jaki sposób korzystać z tabel w prezentacji WWW.
286
Część 4.
Arkusze stylów, tabele i ramki
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 produk
tach.
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 podp
is.
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.
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.
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.
Rozdział 11.
Tabele
287
Komórki tabeli — to najmniejsze jej elementy. Komórka może zawierać dane lub
nagłówek.
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.
Rysunek 11.1.
Części tabeli
Podpis
Nagłówki
Dane
Komórki
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>
288
Część 4.
Arkusze stylów, tabele i ramki
<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 zdefi-
niować tabelę, musisz rozpocząć od górnego wiersza i w nim określić wszystkie ko-
mó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 po-
mocą 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.
<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>
;
<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 pierwszych definicjach tabel, zamykające znaczniki
</TR></TH>
i
</TD>
wymagane były
dla każdego wiersza i komórki. Od tamtych czasów zmieniło się wiele, a przede wszystkim to,
że znaczniki zamykające są opcjonalne. Jednak wiele przeglądarek obsługujących tabele ciągle
oczekuje tych znaczników i ich brak może być przyczyną kłopotów z wyświetleniem tabel. Do-
póki w różnych typach przeglądarek nie pojawi się jednolita implementacja tabel, należy stoso-
wać wspomniane znaczniki zamykające, mimo dowolności ich stosowania. Oprócz tego ich
obecność jest całkowicie poprawna i nic nas nie zmusza do rezygnacji z nich.
Rozdział 11.
Tabele
289
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 mo-
dyfikacje 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 in-
formacjami. Zmodyfikowany kod tabeli ma następującą postać.
Na rysunku 11.2 możesz zobaczyć zmodyfikowaną tabelę.
<tr>
<th>Imię</th>
<td>Alicja</td>
<td>Tomek</td>
<td>Zuzanna</td>
</tr>
<tr>
<th>Wzrost</th>
<td>171</td>
<td>185</td>
<td>160</td>
</tr>
<tr>
<th>Waga</th>
<td>57</td>
<td>82</td>
<td>52</td>
</tr>
[ Pobierz całość w formacie PDF ]