Tabele to jeden ze stałych elementów stron WWW. Za ich pomocą możesz przedstawić internautom ogrom najrozmaitszych danych. W dawnych czasach używano ich również do tworzenia całych stron, ale na szczęście obecnie takie praktyki wychodzą z mody, a tabele zastępowane są DIV-ami.

To jednak nie wszystko, co powinieneś
wiedzieć o tabelach.

Warto posiąść wiedzę pozwalającą tworzyć
naprawdę dobre tabele o semantycznym,
nowoczesnym kodzie, przy wykorzystaniu
specjalnych znaczników i atrybutów. Niezbędna
jest również znajomość elementów mających
wpływ na szeroko pojmowaną dostępność tabel.
Ten artykuł skutecznie zaznajomi cię z tajnikami
świata tabel.

Dziś przedstawimy najważniejsze kwestie dotyczące
tworzenia tabel na stronie WWW. Artykuł
kładzie nacisk na semantykę kodu, użyteczność
i przystępność tabeli dla użytkownika oraz jej
dostępność. Wszystkie przedstawione techniki są
proste do zastosowania na twojej stronie, a gotowe
przykłady znajdują się na płycie CD dołączonej
do magazynu.

Oczywiście temat jest szeroki i nie da się tutaj
opisać wszystkiego. Dlatego też ograniczymy
się do opisu najważniejszych elementów, które
najsilniej wpływają na opisane wcześniej kryteria.
Zacznijmy od podstaw.

Podstawowy kod HTML

Zanim przystąpisz do projektowania przykładowej
tabeli, powinieneś poznać podstawowe znaczniki
HTML, które tworzą jej strukturę. Jeżeli już się
w nich orientujesz, możesz z czystym sumieniem
pominąć tę część artykułu. Jeśli zaś zaliczasz się do
początkujących webmasterów, to przedstawione
tutaj informacje powinny być dla ciebie przydatne.
Cała tabela jest zawsze zawarta wewnątrz pary
znaczników TABLE:

1
2
3

<table>
...zawartość tabeli...
</table>

Tabele dzielimy na wiersze i komórki. Wiersz
może zawierać dowolną liczbę komórek. Jeden
wiersz tworzony jest przez parę znaczników TR. Tak
wygląda kod tabeli złożonej z dwóch wierszy:

1
2
3
4

<table>
<tr></tr>
<tr></tr>
</table>

Wiersze układają się oczywiście jeden pod drugim.
W każdym możesz umieścić dowolną liczbę
komórek. Domyślnie każdy wiersz musi posiadać
taką samą liczbę komórek, ale w dalszej części artykułu
nauczysz się omijać to ograniczenie. Komórkę
wstawia się przy użyciu znacznika TD. Spójrz na
przykład prezentujący kod tabeli zawierającej dwa
wiersze, a w każdym z nich dwie komórki:

1
2
3
4
5
6
7
8
9
10

<table>
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>

Rysunek 1 pokazuje wygląd takiej tabeli. Nie
jest on zbyt zachęcający, ale niedługo poznasz
sposoby jego modyfikacji. Teraz powinieneś poznać
jeszcze jeden ważny znacznik – TH.

Umożliwia on
stworzenie specjalnej komórki, która pełni rolę
nagłówka dla kolumny bądź wiersza tabeli. Do
wcześniejszego kodu wystarczy dodać jeszcze
jeden wiersz, ale z elementami TH, zamiast TD:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table>
<tr>
<th>wiersz 1, nagłówek 1</th>
<th>wiersz 1, nagłówek 2</th>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
<tr>
<td>wiersz 3, komórka 1</td>
<td>wiersz 4, komórka 2</td>
</tr>
</table>

Jak widać na rys. 2, nagłówki tabeli wyraźnie
odróżniają się od zwykłych komórek.
Możesz również tworzyć nagłówki dla wierszy.

W ten sposób mógłbyś dla przykładu przedstawić
wyniki skoków narciarskich na różnych zawodach
Pucharu Świata. Dla kolumn możesz stworzyć
nagłówki „nazwisko zwycięzcy” i „wynik punktowy”,
a w nagłówkach dla wierszy umieścić nazwy
różnych zawodów:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<table>
<tr>
<td></td>
<th>Nazwisko zwycięzcy</th>
<th>Wynik punktowy</th>
</tr>
<tr>
<th>Lahti</th>
<td>Happonen</td>
<td>270.3</td>
</tr>
<tr>
<th>Zakopane</th>
<td>Hautamaeki</td>
<td>277.0</td>
</tr>
</table>

Zwróć uwagę, że odpowiednie ułożenie
nagłówków zostało osiągnięte przez dodanie
pustej komórki w pierwszym wierszu. Powyższy
przykład znajduje się również na płycie CD w pliku
przyklad-1.html.

Dodajemy CSS

Przykład opracowany w poprzedniej części
artykułu nie grzeszy pięknością. Dopiero łącząc
semantyczny, poprawny kod HTML z kodem CSS
otrzymasz naprawdę zadowalający, przyjemny dla
oka wygląd.

Pierwszą właściwością, którą zdefiniujemy
w arkuszu stylów, będzie odstęp wewnętrzny czyli
inaczej padding. Warto ustalić go za jednym razem
dla nagłówków i zwykłych komórek:

1
2
3

th, td {
padding: 7px
}

Teraz ustalmy odpowiedni kolor tła i tekstu dla
nagłówków:

1
2
3
4

th {
background: #FFF3C9;
color: #414632
}

Wato także zmienić kolor tła dla komórek TD
i wycentrować znajdujący się w nich tekst. Centrowanie
nie sprawdza się w każdym przypadku, ale
w tej sytuacji prezentuje się całkiem nieźle:

1
2
3
4

td {
text-align: center;
background: #F4FFE0
}

Na koniec dodajmy do tego odpowiednie
tło dla elementu TABLE. Wypełni ono przestrzeń
między wszystkimi komórkami:

1
2
3

table {
background: #D0C6A4
}

Zrzut ekranu z rys. 4. obrazuje wygląd tabeli
z powyższym stylem CSS. Efekt jest elegancki i estetyczny.
Jak widać, nie zawsze potrzeba dziesiątek
linii kodu do osiągnięcia zadowalającego rezultatu.

Omawiany kod znajduje się również na płycie CD
w pliku przyklad-2.html.
Jeśli chciałbyś, aby między komórkami nie było
żadnych przerw, możesz użyć poniższej reguły CSS:

1
2
3

table {
border-collapse: collapse
}

Atrybuty colspan i rowspan

Kolejną istotną funkcjonalnością tabel jest
możliwość stworzenia specjalnych komórek
o szerokości bądź wysokości kilku normalnych
komórek.

Służą do tego dwa specjalne atrybuty:
COLSPAN i ROWSPAN.

Zajmijmy się najpierw
pierwszym z nich. Za jego pomocą stworzysz komórkę,
która przyjmie szerokość kilku normalnych
komórek. Będziemy bazować na następującym
HTML:

1
2
3
4
5
6

<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
<td>wiersz 1, komórka 3</td>
<td>wiersz 1, komórka 4</td>
</tr>

Aby osiągnąć wspomniany efekt, przypisz
atrybut COLSPAN pierwszej komórce, a w cudzysłowie
podaj wartość liczbową odpowiadającą liczbie
komórek, na jaką ma się ona rozszerzyć:

1

<td colspan=\"2\">wiersz 1, komórka1</td>

Teraz będzie miała podwójną szerokość, a to
z kolei wpłynie na szerokość całego wiersza. Z tego
powodu należy usunąć jedną z pozostałych komórek:

1
2
3
4
5

<tr>
<td colspan=\"2\">wiersz 1, komórka1</td>
<td>wiersz 1, komórka 2</td>
<td>wiersz 1, komórka 3</td>
</tr>

W analogiczny sposób możesz posłużyć się
atrybutem ROWSPAN, który służy do powiększania
komórek w pionie. Spójrz od razu na fragment
gotowego kodu:

1
2
3
4
5
6
7
8
9
10
11

<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
<td>wiersz 1, komórka 3</td>
<td rowspan=\"2\">wiersz 1, komórka 3</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
<td>wiersz 2, komórka 3</td>
</tr>

Atrybut ROWSPAN o wartości „2″ został przypisany
do ostatniej komórki pierwszego wiersza.
Zwróć uwagę na to, że dzięki temu drugi wiersz
może zawierać jedynie trzy komórki.
Z działaniem obu omawianych atrybutów
możesz zapoznać się w pliku przyklad-3.html.

Dodajemy podpis

Interesującym znacznikiem, którego możesz
użyć podczas tworzenia rzeczywiście użytecznych
tabel jest CAPTION.

Umożliwia on łatwe dodanie
do tabeli odpowiedniego podpisu. Zwróć uwagę
na modyfikację wprowadzoną do naszego pierwszego
przykładu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table>
<caption>Tabela 1. Zwycięstwa w Pucharze Świata w sezonie 2006/2007</caption>
<tr>
<td></td>
<th>Nazwisko zwycięzcy</th>
<th>Wynik punktowy</th>
</tr>
<tr>
<th>Lahti</th>
<td>Happonen</td>
<td>270.3</td>
</tr>
<tr>
<th>Zakopane</th>
<td>Hautamaeki</td>
<td>277.0</td>
</tr>
</table>

Jak widać, znacznik CAPTION występuje na
samym początku tabeli, a nie na jej końcu. Jego
położenie możemy zmienić poprzez użycie odpowiedniej
reguły języka CSS:

1
2
3

caption {
caption-side: bottom
}

Użycie powyższego kodu sprawi, że podpis
znajdzie się na samym dole tabeli, co zwiększa
jego walory estetyczne. Użycie stylów jest bardzo
praktyczne dla osób korzystających z programów
udźwiękowiających. Podpis czy też, mówiąc
inaczej, tytuł tabeli zostanie odczytany przed samą
treścią tabeli.

Niestety właściwość CAPTION-SIDE
nie jest obsługiwana przez Internet Explorera i to
nawet przez jego najnowszą, siódmą wersję, która
po raz kolejny okazuje się nie nadążać za nowoczesnymi
programami. Tak więc użytkownicy IE7
muszą pogodzić się z obecnością podpisów nad
tabelami. Może to również być dla nich dodatkowy
bodziec do zmiany przeterminowanej przeglądarki
na produkt dostosowany do realiów współczesnej
sieci.

Czas na dostępność

Opisany powyżej znacznik CAPTION służy
jedynie do nadawania tabelom w miarę krótkich
podpisów. Jeżeli chcesz dołączyć do tabeli dłuższe
streszczenie, powinieneś skorzystać z atrybutu
SUMMARY.

W przypadku bardziej rozbudowanych
tabel jest to wręcz konieczne. Jego treść nie jest
wyświetlana w normalnych przeglądarkach, a jedynie
czytana przez programy udźwiękowiające tekst,
przeznaczone dla osób niewidomych. Atrybut
SUMMARY przypisuje się znacznikowi TABLE:

1
2
3

<table summary=\"\">
...
</table>

Następny element wpływający na dostępność
tworzonych przez ciebie tabel to atrybut ABBR
(nie należy go mylić z takim samym znacznikiem
w HTML-u, który służy do tworzenia zwykłych
skrótów) dla nagłówków TH. Za jego pomocą
każdemu nagłówkowi możesz przypisać jego
prostszą, skróconą formę.

Gdy program udźwiękowiający
natknie się na daną tabelę po raz
pierwszy, odczyta całe nagłówki, ale kolejnym
razem odczyta już tylko ich skrócone formy, co
umożliwia użytkownikom takich programów
szybsze przeglądanie stron.

Poprawmy teraz naszą wcześniejszą tabelę,
dodając do niej streszczenie i skrótowe formy
nagłówków:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table summary=\"Lista zwycięstw we wszystkich zawodach pucharu świata sezonu 2006/2007\">
<caption>Tabela 1. Puchar Świata 2006/2007</caption>
<tr>
<td></td>
<th abbr=\"Nazwisko\">Nazwisko zwycięzcy</th>
<th abbr=\"Wynik\">Wynik punktowy</th>
</tr>
<tr>
<th>Lahti</th>
<td>Happonen</td>
<td>270.3</td>
</tr>
<tr>
<th>Zakopane</th>
<td>Hautamaeki</td>
<td>277.0</td>
</tr>
</table>

Pierwsza zmiana to skrócenie zawartości
znacznika CAPTION i umieszczenie dodatkowych
informacji wewnątrz SUMMARY. Równie proste
było dodanie ABBR do nagłówków TH – wystarczy
przejrzeć ich zawartość i zastanowić się, w jaki
najkrótszy sposób można ją opisać.

Trzeci element dostępnych tabel ma zastosowanie
tylko w sytuacji, gdy daną komórkę
można opisać za pomocą kilku nagłówków. Osoby
korzystające z programów udźwiękowiających typu
JAWS muszą mieć możliwość łatwego i szybkiego
odczytania dowolnej informacji z takiej tabeli, np.
używając odpowiednich skrótów klawiaturowych.

Aby im to umożliwić, powinieneś do każdego
nagłówka przypisać identyfikator ID, a do komórki
atrybut HEADERS. Będzie on informował o identyfikatorach
nagłówków odpowiadających danej
tabeli. Znów weźmiemy na warsztat naszą tabelę
i odpowiednio ją poprawimy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table summary=\"Lista zwycięstw we wszystkich zawodach pucharu świata sezonu 2006/2007\">
<caption>Tabela 1. Puchar Świata 2006/2007</caption>
<tr>
<td></td>
<th abbr=\"Nazwisko\" id=\"nazwisko\">Nazwisko zwycięzcy</th>
<th abbr=\"Wynik\" id=\"wynik\">Wynik punktowy</th>
</tr>
<tr>
<th id=\"lahti\">Lahti</th>
<td headers=\"nazwisko lahti\">Happonen</td>
<td headers=\"wynik lahti\">270.3</td>
</tr>
<tr>
<th id=\"zakopane\">Zakopane</th>
<td headers=\"nazwisko zakopane\">Hautamaeki</td>
<td headers=\"wynik zakopane\">277.0</td>
</tr>
</table>

Mam nadzieję, że zasada używania ID i HEADERS
do tworzenia dostępnych tabel jest dla ciebie
jasna i w pełni zrozumiała. Jednak na wszelki
wypadek powtórzmy to jeszcze raz. Nagłówki
posiadają atrybut ID:

1
2

<th abbr=\"Nazwisko\" id=\"nazwisko\">Nazwisko zwycięzcy</th>
<th abbr=\"Wynik\" id=\"wynik\">Wynik punktowy</th>

A komórki atrybut HEADERS informujący o odpowiadających
im nagłówkach:

1

<td headers=\"nazwisko zakopane\">Hautamaeki</td>

Dla użytkowników przeglądarek graficznych
tego typu rozwiązania raczej nie mają praktycznej
wartości, ale należy pamiętać, że internet jest dla
wszystkich. Wokół nas egzystują osoby mające
poważne problemy zdrowotne, w tym niewidome.

Powinniśmy przejawiać odpowiedzialność społeczną
i tak, jak tworzymy podjazdy dla wózków
inwalidzkich, publikować strony, które są dostępne
dla każdego. To naprawdę proste.

Gotowy przykład tabeli zmodyfikowanej pod
kątem dostępności znajdziesz w pliku przyklad-4.html.

Czy to już wszystko?

To nie wszystkie elementy służące do tworzenia
tabel na stronach WWW. Można by jeszcze wiele
napisać o stosowaniu znaczników THEAD, TFOOT
i TBODY, służących do grupowania wierszy czy
znaczników COLGROUP i COL grupujących kolumny.
Niestety ich praktyczne zastosowania są mocno
ograniczone, a i webmasterzy na dobrą sprawę
mogliby się bez nich obyć.

Dzięki przykładom opisanym w artykule powinieneś
poradzić sobie z przygotowaniem dowolnej
tabeli, która zachowa standardy dostępności.

Może Cię zainteresować:

1. HTML: zaawansowane możliwości tabel
2. HTML – tabele
3. Okiełznać style. Formatowanie tabel i formularzy