Rozdział 7.
Tabele HTML
Do czego słu\ą tabele?
Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń, formularzy i
ich pól, a tak\e innych tabel, przy pomocy wierszy i kolumn komórek. Ka\da tabela ma swój
podpis definiuje go element caption który pozwala na dołączenie krótkiego opisu zawartości
tabeli. Dłu\sze opisy mo\na dołączać korzystając z atrybutu summary.
Tabele języka HTML umo\liwiają prezentację danych na stronach WWW oraz kontrolowanie
umiejscawiania elementów strony tekstu, tekstu preformatowanego, obrazów, pól formularzy,
czy te\ innych tabel, poprzez umieszczanie ich w kolumnach lub wierszach tabeli. Unikaj jednak
stosowania tabel jako szablonu układu dokumentu W3C, konsorcjum opracowujące standardy
języka HTML, zaleca stosowanie arkuszy stylów.
Jakie są elementy strukturalne tabeli?
W tabeli mo\na wyró\nić trzy sekcje: nagłówka, stopki i treści. Umo\liwiają to elementy thead,
tfoot i tbody. Nadają one tabeli strukturę, a w najnowszych typach przeglądarek stwarzają
mo\liwość przewijania zawartości tabeli niezale\nie od sekcji nagłówka i stopki. Opcja ta jest
szczególnie wygodna w przypadku długich tabel, bo opisy kolumn są zawsze wyświetlane na
ekranie.
Na narzucenie tabeli określonej struktury pozwala te\ opcja grupowania kolumn. Dzięki
specjalnym właściwościom elementów colgroup i col, HTML 4 pozwala te\ na stopniowe
wyświetlanie zawartości tabeli, bez konieczności czekania na jej pełne załadowanie.
Tabele mogą zawierać dane nagłówka słu\y do tego element th lub zwykłe dane w tym
przypadku elementem podstawowym jest td. Komórki tabeli mo\na rozpinać na wielu
wierszach i kolumnach, a ka\dą komórkę mo\na zaopatrzyć w etykietę, co ułatwia przekazywanie
informacji u\ytkownikom z wadami wzroku i pozwala prezentować tabele w przeglądarkach o
ograniczonych mo\liwościach graficznych, na przykład zainstalowanych w telefonach
komórkowych.
Jak się zabrać do konstruowania tabeli?
Zanim napiszesz kod tabeli, pobaw się w konstruktora. Naszkicuj tabelę na papierze, zaznacz
komórki rozpięte na n wierszach i/lub kolumnach. Otwórz szablon strony w oknie edytora. Wpisz
kod tabeli, rozpoczynając od zewnętrznego znacznika
| NAGAÓWEK, komórka 1 | NAGAÓWEK, komórka 2 |
|---|---|
| wiersz 1, komórka 1 | wiersz 1, komórka 2 |
| wiersz 2, komórka 1 | wiersz 2, komórka 2 |
Ten kod pomo\e nam rozszyfrować zagadnienia związane z tworzeniem tabel. Zapisz go na dysku
(na przykład pod nazwą tabela.html) i zobacz w przeglądarce jak wygląda przygotowana tabela
(patrz rysunek 7.1).
Rys. 7.1.
Tabela ma podpis
umieszczony nad nią, oraz
wiersz nagłówka i dwie
komórki danych. Atrybut
border pozwolił na dodanie
obramowania domyślnie go
nie ma
Jakie są funkcje poszczególnych elementów tabeli?
Element table to zasobnik przechowujący wszystkie elementy składowe tabeli. Atrybut border
definiuje szerokość obramowania tabeli w pikselach. Jego wartość w tym przypadku to 1
oznacza to, \e chcemy, aby obramowanie było wyświetlane. Wartość równa 0 to brak
obramowania. Jest to wartość domyślna, nie wymaga więc specyfikacji. Element tr tworzy wiersz
a ka\dy wiersz podzielony jest na komórki. Komórki to elementy th i td zawierają one dane
nagłówka i dane tabeli.
Czy mo\na zwiększyć nieco wolny obszar w obrębie komórek?
Przykładowa tabela nie wygląda najlepiej, a jednym z powodów tego stanu rzeczy jest zlewanie
się ze sobą zawartości i obramowania. Czy mo\emy temu zaradzić? Tak, bo mamy do dyspozycji
atrybut elementu table o nazwie cellpadding.
Jak kolosalne ma on znaczenie przekonasz się, gdy zastosujesz atrybut w kodzie naszej tabeli, tak
jak tutaj:
| NAGAÓWEK, komórka 1 | NAGAÓWEK, komórka 2 |
|---|---|
| wiersz 1, komórka 1 | wiersz 1, komórka 2 |
| wiersz 2, komórka 1 | wiersz 2, komórka 2 |
Rys. 7.7*.
Zawartość komórek danych
została wycentrowana
Czy mo\na zmienić sposób wyrównania tak\e w pionie?
Sposób wyrównania zawartości komórek mo\na modyfikować tak\e w pionie. Słu\y do tego
atrybut valign. Jest on stosowany z wartościami top, middle lub bottom i mo\na go stosować
w ka\dej komórce lub wierszu.
Jak zdefiniować w tabeli pustą komórkę?
Większość przeglądarek nie wyświetli komórek tabeli, w których nie umieszczono danych.
Jeśli więc dodamy do kodu naszej przykładowej tabeli kolejne komórki danych, lecz będą wśród
nich puste:
to przeglądarka wyświetli tabelę w niezbyt eleganckiej postaci (patrz rysunek 7.8). Zwróć uwagę,
\e komórka nie ma obramowań, nie widać jej wcale.
Rys. 7.8.
Jeśli w tabeli jest pusta
komórka, przeglądarka
Aby temu zaradzić, nale\y umieszczać w pustych komórkach twarde spacje, o tak:
Teraz przeglądarka nie ma wyjścia i musi wyświetlić pustą komórek danych wraz z
obramowaniem (patrz rysunek 7.9).
Rys. 7.9.
Twarde spacje zmuszają
przeglądarkę do wyświetlenia
pustych komórek
Jak rozpiąć komórkę na kilku kolumnach?
Komórki rozpięte na kilku wierszach lub kolumnach mo\na zaobserwować najczęściej w
nagłówkach. I tam są najbardziej przydatne.
Aby zdefiniować taką komórkę, nale\y do znacznika
i/lub colspan, i przypisać im jako wartości liczby całkowite określające na ilu wierszach i/lub
kolumnach komórka jest rozpięta.
Komórki są rozpinane w dół i na prawo, a więc aby utworzyć komórkę rozpiętą na kilku
kolumnach, nale\y dodać atrybut colspan do komórki wysuniętej najbardziej w lewo, a w
przypadku rozpinania komórki na wierszach, atrybut rowspan powinien być dodany do komórki
pierwszej od góry.
Rozbudujmy więc nagłówek naszej przykładowej tabeli wykorzystując mo\liwość rozpinania
komórek, tak by uzyskać coś takiego, jak na rysunku 7.10.
Rys. 7.10.
Plan tabeli nowa postać
nagłówka z komórką rozpiętą
na trzech kolumnach
Dodamy w nagłówku jeszcze jeden wiersz i w elemencie tr umieścimy atrybut colspan.
Poniewa\ chcemy rozpiąć komórkę na trzech kolumnach, atrybut ten musi mieć wartość 3.
Kod nagłówka tabeli jest teraz taki, jak na rysunku 7.11:
Rys. 7.11.
Nowa postać kodu html
nagłówka z komórką rozpiętą
na trzech kolumnach
W naszej tabeli mo\na jeszcze dodać parę atrybutów zmieniających kolor tła wierszy. Finalny kod
html tabeli przedstawiony jest na wydruku 7.3.
Wydruk 7.3. Tabela, w której wiersz nagłówka rozpięty jest na trzech kolumnach
| Bardzo wa\ny nagłówek!!! | ||
|---|---|---|
| NAGAÓWEK, komórka 1 | NAGAÓWEK, komórka 2 | NAGAÓWEK, komórka 3 |
| wiersz 1, komórka 1 | wiersz 1, komórka 2 | wiersz 1, komórka 3 |
| wiersz 2, komórka 1 | wiersz 2, komórka 2 | |
Tabela, którą tworzy kod z wydruku 7.3 (patrz rysunek 7.12) odpowiada projektowi z rysunku
7.10 porównaj sam.
Rys. 7.12.
Tabela, w której wiersz
nagłówka został rozpięty na
trzech kolumnach
Jak rozpiąć komórkę na kilku wierszach?
Przeanalizujmy jeszcze jeden przykład. Uwzględnia on większość z tego, czego nauczyłeś się ju\
o tabelach: są tu komórki nagłówka, zwykłe komórki danych, do których zastosowane zostanie
wyrównanie oraz są oczywiście komórki rozpięte na wierszach i kolumnach.
Przeanalizuj kod zródłowy tabeli z wydruku 7.4 bez trudu zorientujesz się, które fragmenty
definiują komórki rozpięte i skąd to wynika. Zapisz kod i wyświetl tabelę w przeglądarce (patrz
rysunek 7.13).
Wydruk 7.4. Rozbudowana tabela
| Wydatki | Liczba stałych pracowników | Liczba zleceń | ||
|---|---|---|---|---|
| Planowane | Rzeczywiste | |||
| Styczeń | 5700 | 3800 | 88 | 59 |
| Luty | 10800 | 9600 | 45 | 67 |
| Marzec | 14900 | 23000 | 36 | 24 |
| Kwiecień | 22700 | 15000 | 34 | 45 |
Rys. 7.13.
Nieco bardziej
skomplikowana tabela
przyda Ci się do
najró\niejszych prezentacji
Jak do tabeli zastosować style CSS?
Z pewną nieśmiałością opisywałam mo\liwość zmiany tła tabeli, wiersza czy komórki przy u\yciu
atrybutu bgcolor. Przede wszystkim dlatego, \e standard HTML 4.01 kładzie bardzo mocny
nacisk na stosowania formatowania za pośrednictwem stylów CSS. Có\ nam zostaje? Spróbować
zdefiniować arkusz stylów, który zajmie się wyglądem naszej tabeli.
Na pocieszenie powiem, \e niemal wszystkie przeglądarki obsługują poprawnie atrybut bgcolor,
nie musisz więc z nim się całkowicie rozstawać
Zdefiniujmy style, które zostaną zastosowane w tabeli. Wydruk 7.5 prezentuje pełny kod tabeli
formatowanej przy pomocy kaskadowego arkusza stylówi. Arkusz CSS został zaznaczony
czcionką pogrubioną.
Wydruk 7.5. Kaskadowy arkusz stylów formatujący tabelę
| Wydatki | Liczba stałych pracowników | Liczba zleceń | ||
|---|---|---|---|---|
| Planowane | Rzeczywiste | |||
| Styczeń | 5700 | 3800 | 88 | 59 |
| Luty | 10800 | 9600 | 45 | 67 |
| Marzec | 14900 | 23000 | 36 | 24 |
| Kwiecień | 22700 | 15000 | 34 | 45 |
Efekt graficzny formatowania tabeli przy u\yciu arkusza CSS prezentuje rysunek 7.14.
Rys. 7.14.
Tabela sformatowana przy
u\yciu arkusza stylów CSS
A mo\e jednak tabela bez obramowań?
Jak wspomniałam, o tym, czy obramowania będą wyświetlane, czy nie, decyduje atrybut border.
Jeśli więc nie chcesz widzieć obramowań, wystarczy, \e w znaczniku
| Tutaj pojawia się tekst. I jeszcze jeden akapit tekstu... | W tej komórce zagnie\d\ono inną tabelę!
| ||||
Ta komórka zawiera listę.
|  |
Rys. 7.16.
Ta tabela zawiera tekst, listę,
inną tabelę oraz obraz
O czym trzeba pamiętać wstawiając w komórce tabeli obraz?
Jeśli decydujesz się umieścić w komórce obraz, u\yj takiej postaci kodu:
Jest to wa\ne umieszczenie znaczników
umiejscowienie obrazu.
Jak zapobiec problemom z wyświetlaniem tabel w przeglądarkach?
Tabele nie są równie dobrze obsługiwane we wszystkich typach przeglądarek. Mo\e się więc
zdarzyć, \e zamiast wypieszczonej tabeli, na ekranie pojawi się kaszka. Mo\na tego uniknąć,
aczkolwiek wymaga to bardzo pieczołowitego dopracowania układu tabeli. Jeśli umieścisz w
komórkach tabeli nagłówki i cytaty blokowe, w środowisku, w którym tabela nie jest obsługiwana,
tekst pojawi się w sposób uporządkowany i czytelny. Mo\na te\ skorzystać ze znaczników
lub
umieszczanych na końcu wybranych komórek, np.:
Tam, gdzie tabele są obsługiwane, te dodatkowe znaczniki będą ignorowane, natomiast tam, gdzie
są kłopoty z obsługą tabel, zadziałają złamania wiersza.
Pamiętaj o znacznikach zamykających , i . Pomimo, \e są one opcjonalne, ich
brak mo\e być przyczyną nieoprawnego wyświetlania tabeli w pewnych przeglądarkach.
Elementy konstrukcyjne tabeli
Tabela 5.1 prezentuje podstawowe znaczniki definiujące tabelę, ich funkcje oraz niektóre atrybuty,
które mogą Ci się najbardziej przydać. Szerszy wybór znajdziesz w dodatku A.
Tabela 5.1. Znaczniki tabeli i podstawowe atrybuty
Znaczniki Funkcja znacznika i jego atrybuty
Domyślnie tabele nie mają obramowań.
Niektóre atrybuty:
cellspacing= piksele
wolny obszar między komórkami
align= left|right
sposób wyrównania tabeli
cellpadding= piksele
wolny obszar między krawędziami komórki a zawartością
bgcolor= kod_koloru
zmienia tło tabeli; wartością jest nazwa koloru lub liczba
szesnastkowa
background= url
width= wartość%|piksele
szerokość tabeli w procentach względem szerokości strony lub w
pikselach
height= wartość%|piksele
wysokość tabeli w procentach względem wysokości strony lub w
pikselach
Niektóre atrybuty:
align="left|center|right|justyfy|char
wyrównanie tekstu
bgcolor="rrggbb" (lub nazwa koloru)
kolor tła
bordercolor=="rrggbb" (lub nazwa koloru)
kolor obramowania
wiersza tabeli.
Niektóre atrybuty:
rowspan="n_wierszy"
rozpięcie komórki na n wierszach
colspan="n_kolumn"
rozpięcie komórki na n kolumnach
width= wartość%|piksele
szerokość komórki w procentach względem szerokości tabeli lub w
pikselach
zastosowano w niej czcionkę pogrubioną i wycentrowanie.
Niektóre atrybuty:
rowspan="n_wierszy"
rozpięcie komórki na n wierszach
colspan="n_kolumn"
rozpięcie komórki na n kolumnach
width= wartość%| piksele
szerokość komórki w procentach względem szerokości tabeli lub w
pikselach
umieszcza się go w obrębie elementu
| lub | dodać atrybuty rowspan i/lub colspan, i przypisać im jako wartości liczby całkowite określające na ilu wierszach i/lub kolumnach komórka jest rozpięta. Aby wyłączyć wyświetlanie obramowań, nale\y w znaczniku
|
|---|