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.
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.
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 <table> i dodając kolejne wiersze – elementy tr – a w wierszach komórki nagłówka – elementy th – oraz danych – elementy td.. Nie zapomnij o znacznikach zamykających. Wydruk 7.1 prezentuje prosty schemat kodu tabeli – skorzystaj z jego pomocy.
Wydruk 7.1. Podstawowy kod tabeli
<html>
<head>
<title>Tabela</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
<body>
<table border="1">
<caption>Tabela przykładowa</caption>
<tr>
<th>NAGŁÓWEK, komórka 1</th>
<th>NAGŁÓWEK, komórka 2</th>
</tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</table>
</body>
</html>
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
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.
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:
<table border="1" cellpadding="10">
Oczywiście wartość atrybutu cellpadding może być dowolna. Na rysunku 7.2 możesz sprawdzić, jak zmienił się wygląd tabeli.
Rys. 7.2.
Do elementu table dodano atrybut cellpaddig
Jeśli takie rozwiązanie nie wystarczy, masz do dyspozycji inną możliwość – rozsunięcie samych komórek. Umożliwia to atrybut cellspacing, także dodawany do elementu table. Oto przykład jego definicji:
<table border="1" cellpadding="10" cellspacing="10">
Dodaj atrybut cellspacing o wartości 10 do kodu html tabeli i zobacz, co tym razem się stanie. Komórki rozsuną się i tabela uzyska „lekki” wygląd (patrz rysunek 7.3).
Rys. 7.3.
Do elementu table dodano atrybut cellspacing
Uzyskany efekt wizualny zależy w dużym stopniu od tła tabeli, co pokazuje rysunek 7.4. Dobierając atrybuty bgcolor=”kod_koloru” – określa kolor tła, i bordercolor=”kod_koloru” – określa kolor obramowania, można uzyskać ciekawe efekty. Na rysunku 7.4 w pierwszym przypadku atrybuty te dodano w elemencie table, w drugim zdefiniowano tło w elementach tr, ale można też zmieniać kolory pojedynczych komórek tabeli.
Rys. 7.4.
Kolor tła i obramowań także wpływają na wizualny efekt oddzielenia komórek
Na końcu tego rozdziału znajdziesz tabelę 7.1, w której wymienione zostały podstawowe atrybuty elementów tabeli. Bardziej rozbudowany wykaz jest dostępny w dodatku A.
Rysunek 7.5 wizualizuje relacje pomiędzy zawartością komórek, odstępami między zawartością a krawędziami (cellpadding) i między samymi komórkami (cellspacing).
Rys. 7.5.
Cellspacing, cellpadding a zawartość komórek
Szerokość tabeli można zdefiniować korzystając z atrybutu width. Jego wartość można podawać w dwojaki sposób: w pikselach lub jako wartość procentową odległości między marginesami lewym i prawym.
Jeśli więc w kodzie html przykładowej tabeli zdefiniujemy element table w taki oto sposób:
<table border="1" cellpadding="10" width="50%">
to spowoduje to, że tabela w oknie przeglądarki będzie miała szerokość równą połowie szerokości jej okna. Sprawdź to na rysunku 7.6. Co więcej, relacja ta zostanie zachowana nawet wówczas, gdy użytkownik zmieni rozmiary okna przeglądarki.
Rys. 7.6.
Szerokość tabeli została zdefiniowana za pomocą atrybutu width i stanowi 50% szerokości okna
Domyślnie przeglądarki wycentrowują zawartość komórek nagłówka (definiowanego za pomocą elementu th). Dane komórek „zwykłych” (tych definiowanych za pomocą elementu td) są natomiast wyrównywane względem lewej krawędzi komórki.
Zmianę ustawień domyślnych umożliwia atrybut align, który można dodawać do elementów td lub tr. Dostępne wartości to center, right i left.
Na wydruku 7.2 przedstawiony został uaktualniony kod naszej tabeli. Między innymi do wierszy danych dodano atrybut align=”center”. W jaki sposób to wpływa na sposób wyrównania zawartości komórek możesz zaobserwować na rysunku 7.7.
Wydruk 7.2. Podstawowy kod tabeli rozbudowany o pewne atrybuty
<tr align="center">
Rys. 7.7*.
Zawartość komórek danych została wycentrowana
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.
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:
<td>wiersz 1, komórka 3</td>
<td></td>
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:
<td> </td>
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
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 <th> lub <td> 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.
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
<th colspan="3" bgcolor="lightgreen">Bardzo ważny nagłówek!!!</th>
<th bgcolor="lightblue">NAGŁÓWEK, komórka 1</th>
<th bgcolor="lightblue">NAGŁÓWEK, komórka 2</th>
<th bgcolor="lightblue">NAGŁÓWEK, komórka 3</th>
<tr align="center" bgcolor="lightgrey">
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
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 źró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)....
kicaniec