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.

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.

• 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.

• 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

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.

• <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. Dopóki w różnych typach przeglądarek nie pojawi się jednolita implementacja tabel, należy stosować 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.

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ę.

	<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> <tr> <th>Kolor oczu</th> <td>niebieski</td> <td>chabrowe</td> <td>brązowe</td> </tr>
Rysunek 11.2. Nagłówki tabeli wyświetlone w lewej kolumnie

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.

Rysunek 11.3. Puste i naprawdę puste komórki

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.

Rysunek 11.4. Prosta tabela kolorów

Zanim rozpoczniesz wprowadzanie rzeczywistego kodu HTML, naszkicuj sobie swoją tabelę, abyś miał przed oczyma nagłówki i wartości każdej z komórek. Najlepiej skorzystać z edytora tekstu wyposażonego w edytor tabel (takiego jak Microsoft Word) lub arkusza kalkulacyjnego. Widząc układ tabeli i wartości komórek, możesz zacząć pisać kod HTML tabeli.

Rozpocznijmy od najprostszej możliwej konstrukcji strony HTML zawierającej tabelę. Ten plik HTML, jak i wszystkie inne, możesz przygotować w dowolnym edytorze tekstu:

<html>

<head>

<title>Kolory</title>

</head>

<body>

<table border="1">

… tutaj dodaj wiersze i kolumny tabeli …

</table>

</body>

</html>

Wprowadź teraz, między otwierającym znacznikiem <TABLE> a znacznikiem zamykającym </TABLE>, kolejne wiersze (jest to miejsce wskazane przez napis … tutaj dodaj wiersze i kolumny tabeli …). Pierwszy wiersz zbudowany jest z trzech komórek nagłówka umieszczonego wzdłuż górnej krawędzi tabeli. Wiersz ten wskazywany jest przez znacznik <TR>, a jego komórki przez znaczniki <TH>:

<tr>

<th>Czerwony</th>

<th>Żółty</th

<th>Niebieski</th

</tr>

Możesz sformatować kod HTML w dowolny sposób. Tak, jak w przypadku wszystkich innych kodów HTML, przeglądarka ignoruje nadmiarowe spacje i naciśnięcia klawisza Enter. Ja preferuję taką właśnie postać — zawartość poszczególnych wierszy wcięta, a znaczniki komórek w osobnych liniach, abym łatwo mogła rozróżniać wiersze i kolumny.

Dodaj teraz drugi wiersz. Pierwsza komórka drugiego wiersza to nagłówek Czerwony, który ma być umieszczony z lewej strony tabeli, będzie to więc pierwsza komórka w tym wierszu, a po niej pojawią się komórki danych:

<tr>

<th>Czerwony</th>

<td>Czerwony</td>

<td>Pomarańczowy</td>

<td>Purpurowy</td>

</tr>

Dodaj kolejne dwa wiersze z nagłówkami Żółty i Niebieski. Oto, jak w tej chwili wygląda kod naszej tabeli:

<table border="1">

<tr>

<th>Czerwony</th>

<th>Żółty</th>

<th>Niebieski</th>

</tr>

<tr>

<th>Czerwony</th>

<td>Czerwony</td>

<td>Pomarańczowy</td>

<td>Purpurowy</td>

</tr>

<tr>

<th>Żółty</th>

<td>Pomarańczowy</td>

<td>Żółty</td>

<td>Zielony</td>

</tr>

<tr>

<th>Niebieski</th>

<td>Purpurowy</td>

<td>Zielony</td>

<td>Niebieski</td>

</tr>

</table>

Na koniec dodaj prosty podpis. Znacznik <CAPTION> powinien pojawić się zaraz po znacz­niku <TABLE BORDER="1"> a przed pierwszym znacznikiem <TR>:

<table border="1">

<caption><b>Tabela 1.1:</b> Mieszanie kolorów</caption>

<tr>

Teraz, gdy pierwsza odsłona kodu jest gotowa, przetestuj plik HTML w swojej ulubionej przeglądarce, która obsługuje tabele. Na rysunku 11.5 pokazany jest wygląd naszej tabeli w przeglądarce Internet Explorer.

Och! Co się stało z tym górnym wierszem nagłówka? Wszystko jest pomieszane. Oczywiście przyczyną kłopotu jest pusta komórka, którą należało wprowadzić na początku pierwszego wiersza, aby przesunąć komórki nagłówka nad właściwe kolumny. HTML nie jest na tyle sprytny, by pamiętać o tym za Ciebie (to jest ten rodzaj błędu, który najczęściej znaj­dziesz, testując swoje tabele po raz pierwszy).

Rysunek 11.5. Tabela mieszania kolorów

Dodajmy więc w pierwszym wierszu pustą komórkę nagłówka (jest to linia <TH><BR/> </TH>):

<tr>

<th><br /></th>

<th>Czerwony</th>

<th>Żółty</th>

<th>Niebieski</th>

</tr>

Zastosowałem tutaj znacznik <TH>, ale równie dobrze mógłby to być znacznik <TD>. Ponieważ komórka jest pusta, sposób jej formatowania nie ma znaczenia.

Jeśli ponownie wyświetlisz tabelę w przeglądarce, rezultat powinien być zadowalający, kolumny powinny mieć odpowiednie nagłówki.

Określanie wielkości tabel,
obramowań oraz komórek

Poznałeś już podstawowe informacje dotyczące tworzenia tabel, nadszedł zatem czas, abyś przyjrzał się atrybutom, które mogą modyfikować ogólny wygląd tabeli. Atrybuty przedstawione w tej części rozdziału określają szerokość tabeli oraz jej komórek, odstępy pomiędzy brzegami komórek a ich zawartością, odległości między poszczególnymi wierszami i kolumnami tabeli oraz szerokość jej obramowań.

Określanie szerokości tabeli

Powróćmy do ostatniego przykładu, w nim za określenie szerokości przedstawionej tabeli oraz jej poszczególnych kolumn odpowiada przeglądarka. W wielu przypadkach to najlepsze rozwiązanie, gwarantujące, że tabela zostanie poprawnie wyświetlona w różnych przeglądarkach, działających w różnej rozdzielczości. Po prostu, niech wszystkie szerokości określi przeglądarka.

Mogą się jednak zdarzyć sytuacje, w których będziesz wolał dysponować większa kontrolą szerokości tabeli. W szczególności dotyczy to sytuacji, gdy domyślne ustawienia przeglądarki są wyjątkowo dziwne. W tym podrozdziale dowiesz się, jak można określać szerokość tabeli.

Za pomocą atrybutu WIDTH znacznika <TABLE> można zdefiniować szerokość tabeli na stronie. Wartością atrybutu jest dokładna szerokość w pikselach lub w procentach względem szerokości okna (np. 50% bądź 75%). W tym drugim przypadku szerokość tabeli będzie się zmieniała wraz ze zmianą szerokości okna. Jeśli atrybut ten jest stosowany, szerokość kolumn tabeli zostanie dopasowana do narzuconej szerokości.

Aby tabela zajęła 100% szerokości okna przeglądarki, należy dodać do znacznika <TABLE> atrybut WIDTH o następującej postaci. Wyniki tego kodu zostały przedstawione na rysunku 11.6.

<table border="1" width="100%">

Rysunek 11.6. Tabela o określonej szerokości w przeglądarce Internet Explorer
	Czasami narzucenie zbyt małej szerokości kolumny może być niemożliwe z powodu danych, które ona zawiera. W takim przypadku Netscape próbuje tak dopasować szerokość kolumny, by była najbliższa narzuconej przez Ciebie wartości.

Definiując szerokość tabeli, zawsze lepiej rób to w procentach, nie w pikselach. Ponieważ nie wiesz, z jakiej szerokości okna korzysta Twój czytelnik, ustawienie szerokości w procentach umożliwia dopasowanie do okna o dowolnej szerokości. Jeśli podajesz szerokość w pikselach, musisz się liczyć także i z taką możliwością, że tabela ucieknie poza ekran.

Zmiana obramowań tabeli

Najczęściej używanym atrybutem znacznika <TABLE> jest atrybut BORDER. Jest on umie-szczany bezpośrednio wewnątrz tego znacznika. Określa on czy wokół tabeli mają być wyświetlane obramowania, a jeśli tak, to jakiej szerokości.

Od momentu wprowadzenia do języka HTML atrybut ten był kilkukrotnie modyfikowany:

• w HTML-u 2.0 można było użyć znacznika o postaci <TABLE BORDER>, który powodował, że wokół tabeli były wyświetlane obramowania. W graficznych przeglądarkach obramowanie tabeli mogło być wyświetlane w wymyślny sposób, natomiast w przeglądarkach tekstowych, jako seria minusów i pionowych kresek (|);

• począwszy od HTML-a 3.2, zmienił się prawidłowy sposób zastosowania atrybutu BORDER, zaczął on oznaczać szerokość obramowania tabeli wyrażoną w pikselach. Znacznik o postaci <TABLE BORDER="1"> definiuje tabelę o obramowaniu szerokości jednego piksela, znacznik <TABLE BORDER="2">, tabelę o obramowaniu szerokości dwóch pikseli, i tak dalej. Przeglądarki zgodne z wersją 3.2 języka HTML powinny wyświetlać wcześniejszą składnię znacznika tabeli <TABLE BORDER>, jako tabelę z ramką o szerokości jednego piksela (czyli tak samo, jak gdyby został użyty znacznik <TABLE BORDER="1">;

• aby stworzyć tabelę, której obramowanie nie ma szerokości i jest niewidoczne, należy użyć znacznika <TABLE BORDER="0">. Takie tabele bez obramowań są przydatne przy określaniu struktury strony. W sytuacjach, gdy atrybut BORDER zostanie pominięty, przeglądarki zgodne z wersją 3.2 (oraz kolejnymi) języka HTML, powinny wyświetlać tabelę bez ramek (podobnie jak w przypadku użycia <TABLE BORDER="0">).

Istnieje możliwość określania szerokości obramowania wyświetlanego wokół tabeli. Jeśli atrybut BORDER ma wartość liczbową, to obramowanie tabeli będzie miało podaną szerokość (w pikselach). Domyślnie obramowanie ma szerokość jednego piksela (BORDER="1"). Jeśli atrybutowi BORDER zostanie przypisana wartość 0 (BORDER="0"), to obramowanie nie zostanie wyświetlone (podobnie jak w przypadku gdy atrybut ten zostanie pominięty).

Na rysunku 11.7 została przedstawiona tabela z obramowaniem o szerokości 10 pikseli. Definicja tej tabeli oraz jej obramowania ma następującą postać:

<TABLE BORDER="10" WIDTH="100%">

Rysunek 11.7. Szerokość obramowania tabeli

Odstępy między zawartością komórki
a jej obramowaniem

W HTML-u istnieje atrybut definiujący wielkość odstępu pomiędzy obramowaniem komórki tabeli a jej zawartością. W wielu przeglądarkach wielkość ta domyślnie wynosi 1 piksel. Za pomocą atrybutu CELLPADDING znacznika <TABLE> można zmieniać wielkość tego odstępu. Wartość tego atrybutu określa wielkość odstępu pomiędzy obramowaniem komórki a jej zawartością wyrażoną w pikselach.

Poniżej przedstawiłam zmodyfikowany kod znacznika <TABLE>, w którym odstęp pomiędzy zawartością komórki a jej obramowaniem, został powiększony do 10 pikseli. Wyniki tej modyfikacji możesz zobaczyć na rysunku 11.8.

<table border="10" width="100%" cellpadding="10">

Rysunek 11.8. Odstęp pomiędzy zawartością komórki a jej obramowaniem

Jeśli przyjęto ustawienie CELLPADDING="0", zawartość komórki będzie stykała się z krawędziami komórki (nie wygląda to zbyt dobrze).

Odstępy między komórkami

Odstępy między komórkami pod wieloma względami przypominają odstępy między tekstem a krawędzią komórki. Jedyna różnica polega na tym, że odstępy między komórkami, jako limitujące wolną przestrzeń oddzielającą komórki, pozwalają na określenie szerokości obramowań poszczególnych komórek. Atrybutem umożliwiającym definiowanie tych szerokości jest CELLSPACING znacznika <TABLE>. Domyślną wartością tego atrybutu jest 2.

Wprowadzone w ten sposób obramowania wokół komórek tworzą również obrys całej tabeli, który nakłada się na obramowanie tejże, ustawione za pomocą atrybutu BORDER.

Poeksperymentuj, a zobaczysz różnicę, na przykład, na rysunku 11.9 pokazana jest tabela, dla której szerokość obramowań komórek wynosi 8 pikseli, a obramowania całej tabeli, 4 piksele.

<table border="4" width="100%" cellpadding="10" cellspacing="8">

Rysunek 11.9. Odstępy między komórkami (oraz szerokość obramowania tabeli)

Szerokość kolumn

Atrybut WIDTH można zastosować także do poszczególnych komórek (<TH> lub <TD>), aby za jego pomocą określić szerokość konkretnych kolumn. Podobnie jak w przypadku szerokości tabeli przedstawionej we wcześniejszej części rozdziału, wartością atrybutu jest dokładna szerokość kolumny w pikselach lub w procentach względem szerokości całej tabeli. W tym drugim przypadku szerokość tabeli będzie się zmieniała wraz ze zmianą szerokości okna. Tutaj także zalecane jest korzystanie z wartości procentowej, aby tabela była poprawnie wyświetlana niezależnie od szerokości okna.

Możliwość definiowania szerokości kolumn może być przydatna, gdy chcesz, by wszystkie kolumny Twojej tabeli miały identyczną szerokość niezależnie od ich zawartości (możliwość ta jest przydatna, na przykład, w niektórych formach układu stron).

Rysunek 11.10 przedstawia oryginalną tabelę z rysunku 11.1. Tym razem, tabela zajmuje jednak 100% szerokości okna przeglądarki. Pierwsza kolumna tabeli zajmuje 40% jej całkowitej szerokości, a pozostała trzy kolumny po 20%.

Aby stworzyć taką tabelę, szerokości kolumn zostają podane w komórkach nagłówka, tak jak pokazałam na poniższym przykładzie:

<table border="1" width="100%">

<caption>Podstawowa statystyka</caption>

<tr>

<th width="40%">Imię</th>

<th width="20%">Wzrost</th>

<th width="20%">Waga</th>

<th width="20%">Kolor oczu</th>

</tr>

Rysunek 11.10. Szerokości kolumn

A co się stanie, jeśli stworzysz tabelę o szerokości 80% szerokości strony, zawierającą te same komórki nagłówka, co tabela przedstawiona w poprzednim przykładzie (czyli o szerokości 40%, 20%, 20% i 20%)? Zmodyfikuj nieznacznie poprzednią tabelę, określając jej szerokość jako 80%, jak pokazałam na poniższym przykładzie. Gdy wyświetlisz nową tabelę w przeglądarce okaże się, że zajmuje ona 80% szerokości strony. Poszczególne kolumny wciąż zajmują odpowiednio 40%, 20%, 20% i 20% szerokości tabeli. Dla zachowania ścisłości, kolumny zajmują teraz 32%, 16%, 16% i 16% szerokości całej strony.

<table border="1" width="80%">

<caption>Podstawowa statystyka</caption>

<tr>

<th>Imię</th>

<th>Wzrost</th>

<th>Waga</th>

<th>Kolor oczu</th>

</tr>

Wprowadzanie złamań wiersza

Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań wiersza (znaczniki <BR />). Łamania wiersza są szczególnie użyteczne w przypadku tabel, w których większość komórek ma niewielkie rozmiary, a jedynie dwie czy trzy zawierają dłuższe teksty. Dopóki szerokość ekranu jest wystarczająca, przeglądarka po prostu poszerza kolumny i wydłuża wiersze, co wygląda niekiedy dziwnie. Na przykład, ostatni wiersz tabeli przedstawionej na rysunku 11.11 został zdefiniowany w następujący sposób:

<tr>

<td>TC</td>

<td>7</td>

<td>Podejrzliwy za wyjątkiem chwil gdy jest głodny</td>

</tr>

Rysunek 11.11. Tabela, której jeden wiersz jest wyjątkowo długi

Wstawiając znaczniki łamania wiersza, możesz zmieścić tekst w węższej kolumnie, dzięki czemu tabela będzie wyglądała, jak na rysunku 11.12. Poniżej przedstawiłam zmodyfikowany kod ostatniego wiersza tej tabeli:

<tr>

<td>TC</td>

<td>7</td>

<td>Podejrzliwy za <br />

wyjątkiem chwil <br />

gdy jest głodny</td>

</tr>

Rysunek 11.12. Korzystając ze znacznika <BR>, można zawinąć długi teks

Możliwa jest także sytuacja odwrotna, to znaczy taka, w której zawartość komórki jest zawijana, a nie powinna (jest to ważne, szczególnie w przypadku elementów formularza zawartych w komórce tabeli, na przykład, chcesz, by etykieta i pole danych wejściowych nie były rozdzielane). W takim wypadku możesz dodać atrybut NOWRAP do znacznika <TH> lub <TD>. Przeglądarka nie będzie wówczas rozdzielała takich danych i wyświetli je w jednym wierszu. Pamiętaj, że zawsze możesz ręcznie dodać znaczniki <BR />, by wprowadzić łamanie wiersza dokładnie tam, gdzie sobie tego życzysz.

W HTML-u 4.0 atrybut NOWRAP stał się przestarzały i został zastąpiony przez właściwości arkuszy stylów.

Modyfikacje wyglądu tabeli za pomocą znacznika <BR> i atrybutu NOWRAP wymagają jednak ostrożności. Pamiętaj, że tabela będzie oglądana w oknach o różnych szerokościach. Spróbuj zmienić wielkość okna przeglądarki, w której wyświetliłeś stronę i przekonaj się, czy pomimo zmian szerokości tabeli sposób sformatowania jej zawartości pozostanie taki sam. W większości przypadków powinieneś spróbować pozostawić przeglądarce zadanie sformatowania zawartości tabeli i tylko w razie konieczności wprowadzać w nim drobne modyfikacje.

Kolor i wyrównanie tabeli oraz komórek

Kiedy już stworzysz podstawowy układ tabeli, z jej wierszami, nagłówkami i zawartością, możesz rozpocząć poprawianie jej wyglądu. Można to zrobić na kilka sposobów. Jedną z metod poprawiania i uatrakcyjniania wyglądu tabel jest określanie koloru jej obramowań i komórek.

Modyfikacja koloru tła tabel i komórek

Aby zmienić tło tabeli, wiersza lub komórki wiersza, do znacznika <TABLE>, <TR>, <TH> lub <TD> dodawany jest atrybut BGCOLOR. Podobnie jak w przypadku znacznika <BODY>, wartością atrybutu BGCOLOR jest określająca kolor liczba szesnastkowa lub jedna z szesnastu nazw kolorów (ta możliwość istnieje w wielu przeglądarkach, w tym w Internet Explorerze i Netscape Navigatorze). Dopuszczalne nazwy kolorów to: black (czarny), silver (srebrny), gray (szary), white (biały), maroon (kasztanowy), red (czerwony), purple (ciemna purpura), fuchsia (jasna purpura), green (zielony), lime (cytrynowy), olive (oliwkowy), yellow (żółty), navy (granatowy), blue (niebieski), teal (ciemny turkus) i aqua (bladoniebieski). Atrybut BGCOLOR stał się częścią specyfikacji HTML 4.0, jednak został uznany za przestarzały i należy go zastępować arkuszami stylów.

Ustawienia dotyczące koloru tła dominują nad ustawieniami koloru tła elementu nadrzędnego. Oznacza to, że ustawienia koloru tła tabeli dominują nad ustawieniami tła strony, ustawienia koloru wiersza dominują nad ustawieniami koloru tła tabeli, a ustawienia dotyczące koloru komórki nad wszelkimi innymi. W przypadku tabel zagnieżdżanych w komórkach, kolor tła zagnieżdżonej tabeli będzie identyczny z kolorem tła mieszczącej ją komórki.

Pamiętaj także, by wraz ze zmianą koloru tła komórki zmienić kolor zawartego w niej tekstu, aby komórka była czytelna. Jeśli chcesz, aby Twoje strony były zgodne z wersjami przeglądarek wcześniejszymi niż Internet Explorer 4.0 oraz Netscape Navigator 4.0, to powinieneś użyć znacznika <FONT COLOR…>. W przypadku przeglądarek obsługujących kaskadowe arkusze stylów, takich jak Internet Explorer 4.0 (lub wersja późniejsza) oraz Netscape Navigator 4.0 (lub wersja późniejsze), można wykorzystać właściwość color CSS.

Aby kolor komórki został wyświetlony, musi ona coś zawierać, może to być jedynie znacznik <BR />.

Zajmiemy się teraz przykładem, który pozwoli nam przećwiczyć zmianę koloru tła całej tabeli i komórek. Oto szachownica, która powstała w oparciu o tabelę HTML. Sama tabela ma białe tło, a poszczególne komórki czarne. Warcaby, na rysunku czerwone i czarne kółka, to obrazy.

Jeśli chodzi o umieszczanie obrazów w tabelach, to ogólnie rzecz biorąc, odstępy umieszczane w oryginalnym kodzie HTML nie mają wpływu na ostateczny wygląd strony. Istnieje jednak jedno odstępstwo od tej reguły; dotyczy ono przeglądarki Netscape Navigator i jest związane z umieszczaniem obrazów wewnątrz komórek tabel. Załóżmy, że zapisałeś kod komórki tabeli zawierającej znacznik <IMG> w następujący sposób: <td> <img src="obraz.gif"> </td> W tym przypadku, znak przejścia do nowego wiersza umieszczony pomiędzy znacznikami <TD> i <IMG> ma znaczenie. Powoduje on, że obraz nie zostanie poprawnie umieszczony wewnątrz tabeli (jest to szczególnie zauważalne w komórkach, których zawartość jest wyśrodkowana). To dziwne zachowanie przeglądarek firmy Netscape dotyczy także najnowszej wersji Netscape Navigatora. Problem można jednak rozwiązać bardzo łatwo, wystarczy umieścić znaczniki <TD> oraz <IMG> w tej samej linii: <td><img src="obraz.gif"></td>

Zasadę przedstawioną w ostatniej notatce wykorzystałam w poniższym przykładzie. Wygląd tego fragmentu kodu, wyświetlonego w przeglądarce Internet Explorer przedstawiłam na rysunku 11.13.

<html>

<head>

<title>Szachownica</title>

</head>

<body>

<table bgcolor="#FFFFFF" width="50%">

<tr align="CENTER">

<td bgcolor="#000000" width="33%">

<img src="redcircle.gif" alt="Czerwony pionek" /></td>

<td width="33%">

<img src="redcircle.gif" alt="Czerwony pionek" /></td>

<td bgcolor="#000000" width="33%">

<img src="redcircle.gif" alt="Czerwony pionek" /></td>

</tr>

<tr align="CENTER">

<td><img src="blackcircle.gif" alt="Czarny pionek" /></td>

<td bgcolor="#000000"><br />

</td>

<td><img src="blackcircle.gif" alt="Czerwony pionek" /></td>

</tr>

<tr align="CENTER">

<td bgcolor="#000000"><br />

</td>

<td><img src="blackcircle.gif" alt="Czerwony pionek" /><br>

</td>

<td bgcolor="#000000"><br />

</td>

</tr>

</table>

</body>

</html>

Rysunek 11.13. Kolory komórek tabeli

Zmiana koloru obramowań tabeli

Internet Explorer dostarcza także atrybutów, które umożliwiają zmianę kolorów obramowań elementów tabeli. Są to atrybuty: BORDERCOLOR, BORDERCOLORLIGHT i BORDERCOLORDARK. Jako wartość mogą przyjmować określającą kolor liczbę szesnastkową lub jedną z szesnastu nazw kolorów. Atrybuty te można stosować w znacznikach <TABLE>, <TH> oraz <TD>. Tak, jak w przypadku kolorów tła, ustawienia kolorów obramowań dominują nad ustawieniami poczynionymi dla elementu nadrzędnego. We wszystkich wypadkach, użycie któregoś z wymienionych wyżej atrybutów wymaga umieszczenia w znaczniku <TABLE> atrybutu BORDER.

Te rozszerzenia są na razie obsługiwane wyłącznie przez przeglądarkę Internet Explorer, z wyjątkiem atrybutu BORDERCOLOR, z którym radzi sobie także Netscape Navigator 4.0. Wszystkie te atrybuty zostały uznane za przestarzałe i należy je zastępować arkuszami stylów:

• BORDERCOLOR określa kolor obramowania, dezaktywując wygląd trójwymiarowego domyślnego obramowania,

• BORDERCOLORLIGHT ustala kolor rozjaśnienia trójwymiarowego obramowania, w którym zostanie wyświetlona lewa i górna krawędź obramowania tabeli,

• BORDERCOLORDARK ustala kolor cienia trójwymiarowego obramowania, w którym zostanie wyświetlona prawa i dolna krawędź obramowania tabeli.

Na rysunku 11.14 przedstawiłam przykład tabeli o obramowaniu szerokości 10 pikseli. Aby zademonstrować działanie atrybutów dostępnych w przeglądarce Internet Explorer, użyłam atrybutów BORDERCOLORDARK oraz BORDERCOLORLIGHT, dzięki którym grubemu obramowaniu tabeli nadałam przestrzenny wygląd. Pierwsza linia kodu została zmieniona w następujący sposób:

<table border="10" bordercolorlight="Red" bordercolordark="Black"

bgcolor="#ffffff" width="50%">

Rysunek 11.14. Kolory obramowań tabeli

Ta linia kodu stała się dosyć długa, nieprawdaż? Być może będziesz mógł ją łatwiej przeanalizować, jeśli zapiszesz każdy atrybut w osobnej linii, tak jak pokazałam na poniższym przykładzie. Przykład wciąż działa w identyczny sposób. Pamiętaj jednak, że zamykający nawias trójkątny (>) musi się pojawić wyłącznie po ostatnim atrybucie znacznika.

<table border="10"

bordercolorlight="Red"

bordercolordark="Black"

bgcolor="#ffffff"

width="50%">

Określanie wyrównania zawartości tabel

Inną metodą poprawienia wyglądu tabeli jest zmodyfikowanie sposobu wyrównania jej zawartości. Atrybut ALIGN określa wyrównanie zawartości tabeli w poziomie, a atrybut VALIGN, w pionie. Oba te atrybuty zostały wprowadzone w HTML-u 3.2, jednak w HTML-u 4.0 zostały uznane za przestarzałe. W tej części rozdziału dowiesz się, w jaki sposób można używać tych atrybutów.

Wyrównywanie tabeli

Domyślnie tabela wyrównywana jest do lewej krawędzi strony, a tekst umieszczany jest nad i pod nią. Za pomocą atrybutu ALIGN możliwe jest wyrównywanie tabel względem dowolnego margi­nesu oraz otaczanie ich tekstem, podobnie jak w przypadku obrazów.

Ustawienie ALIGN="LEFT" powoduje wyrównanie tabeli względem lewego marginesu, a towarzyszący jej tekst jest umieszczany między prawą krawędzią strony a tabeli. Ustawienie ALIGN="RIGHT" działa podobnie, z tym, że tabela jest wyrównywana do prawego marginesu.

W przykładzie przedstawionym na rysunku 11.15, tabela o szerokości wynoszącej 70% całkowitej szerokości strony, została wyrównana do lewego brzegu strony. Oto postać znacznika <TABLE> definiującego tę tabelę:

<table border="1" align="left" width="70%">

Rysunek 11.15. Tabela otoczona tekstem

Rezygnacja z otaczania tekstem realizowana jest w taki sam sposób, jak dla obrazów, za pomocą znacznika złamania wiersza, zawierającego atrybut CLEAR.

Wyrównywanie tabel względem obu marginesów to zadanie nieco trudniejsze. Przed pojawieniem się programów Internet Explorer 4.0 i Netscape Navigator 4 przeglądarki nie obsługiwały ustawienia ALIGN="CENTER" dla tabel. Aby uzyskać efekt wycentrowania tabeli na stronie, mogłeś stosować znaczniki <CENTER> lub <DIV ALIGN="CENTER"> (oba poznałeś w rozdziale 6. — „Więcej o formatowaniu tekstu w HTML-u”). Teraz jednak obie najnowsze wersje przeglądarek obsługują poprawnie znacznik <TABLE ALIGN="CENTER">. Jednak, podobnie jak wszystkie atrybuty formatujące w HTML-u 4.0, także atrybut ALIGN został uznany za przestarzały i należy go zastępować arkuszami stylów.

Wyrównanie zawartości komórki

Gdy wiersze i komórki tabeli są już na swoim miejscu, a sama tabela jest odpowiednio wyrównana na stronie, możesz przystąpić do wyrównania zawartości poszczególnych komórek, by w możliwie najlepszy sposób zaprezentować zawartość tabeli. Dostępnych jest kilka opcji pozwalających wyrównywać dane w pionie i w poziomie. Na rysunku 11.16 pokazana jest tabela (jest to prawdziwa tabela HTML!), w której zastosowano najróżniejsze sposoby wyrównywania zawartości komórek.

Sposób wyrównania zawartości komórki w poziomie określony jest wartością atrybutu ALIGN. Możliwe są następujące wartości: LEFT (wyrównanie do lewego marginesu), RIGHT (do prawego marginesu) i CENTER (wycentrowane względem obu marginesów).

Rysunek 11.16. Sposoby wyrównania zawartości komórek w pionie i poziomie

Sposób wyrównania zawartości komórki w pionie określony jest wartością atrybutu VALIGN. Przyjmuje on takie oto wartości: TOP (dosunięcie do górnego marginesu), BOTTOM (do dolnego marginesu) i MIDDLE (wycentrowanie względem obu marginesów). W Netscape Navigatorze atrybutowi temu można także przypisać wartość VALIGN="BASELINE", która w zasadzie jest równoważna ustawieniu VALIGN="TOP". Jedyna różnica polega na tym, że zawartość wyrównywana jest względem pierwszego wiersza każdej komórki (w zależności od zawartości komórki efekt może, ale nie musi, być taki sam, jak w przypadku ustawienia VALIGN="TOP").

Domyślnie zawartość komórek nagłówka jest centrowana w poziomie i pionie, natomiast w przypadku komórek danych, zawartość jest centrowana w pionie, a w poziomie wyrównana do lewego marginesu.

Za pomocą atrybutów ALIGN i VALIGN znacznika <TR> możesz narzucać własne ustawienia dla całego wiersza, które będą dominować nad ustawieniami domyślnymi. Oto przykład:

<tr align="CENTER" valign="TOP">

Podobnie, poprzez dodanie atrybutu ALIGN do znacznika <TD> lub <TH>, możesz definiować własny sposób wyrównania dla poszczególnych komórek:

<tr align="center" valign="top">

<td>14</td>

<td>16</td>

<td align="left">Brak danych</td>

<td>15</td>

</td>

Poniższy kod źródłowy przedstawia różne sposoby wyrównywania zawartości komórek. Rezultaty zaprezentowane są na rysunku 11.17.

	<html> <head> <title>Wyrównywanie zawartości komórek</title> </head> <body> <table border="1"> <tr> <th>&nbsp;</th> <th>Do lewej</th> <th>Do środka</th> <th>Do prawej</th> </tr> <tr> <th>Do góry</th> <td align="LEFT" valign="TOP"> <img src="button.gif" alt="Znaczek" /></td> <td align="CENTER" valign="TOP"> <img src="button.gif" alt="Znaczek" /></td> <td align="RIGHT" valign="TOP"> <img src="button.gif" alt="Znaczek" /></td> </tr> <tr> <th>Na środku</th> <td align="LEFT" valign="MIDDLE"> <img src="button.gif" alt="Znaczek" /></td> <td align="CENTER" valign="MIDDLE"> <img src="button.gif" alt="Znaczek" /></td> <td align="RIGHT" valign="MIDDLE"> <img src="button.gif" alt="Znaczek" /></td> </tr> <tr> <th>Do dołu</th> <td align="LEFT" valign="BOTTOM"> <img src="button.gif" alt="Znaczek" /></td> <td align="CENTER" valign="BOTTOM"> <img src="button.gif" alt="Znaczek" /></td> <td align="RIGHT" valign="BOTTOM"> <img src="button.gif" alt="Znaczek" /></td> </tr> </table> </body> </html>
Rysunek 11.17. Opcje wyrównania

Wyrównywanie tytułu

Opcjonalny atrybut ALIGN znacznika <CAPTION> określa sposób wyrównania tekstu podpisu. W zależności od stosowanej przeglądarki, wartości tego atrybutu mogą być różne.

W większości przeglądarek dostępne są dwie wartości: TOP i BOTTOM. Wykorzystanie tych wartości stanowi poprawny sposób użycia atrybutu ALIGN zgodny ze specyfikacją HTML . Domyślnie podpis umieszczany jest u góry tabeli (ALIGN="TOP"). Jeśli chcesz, by podpis znalazł się pod tabelą, przypisz atrybutowi ALIGN wartość BOTTOM. Oto przykład odpowiedniego kodu:

<table>

<caption align="BOTTOM">Limity obrotów dla różnych owoców</caption>

W przeglądarce Internet Explorer podpisy definiuje się jednak inaczej. Do dyspozycji masz tu atrybut VALIGN, za pomocą którego możesz umieszczać podpis pod lub nad tabelą oraz atrybut ALIGN, który przyjmuje wartości LEFT, RIGHT i CENTER, a służy do wyrównania podpisu w poziomie.

Aby podobne rezultaty uzyskać w przeglądarce Netscape Navigator, musisz zastosować ALIGN="BOTTOM" lub ALIGN="TOP", a następnie skorzystać z elementu <DIV>, i za pomocą jego własnego atrybutu ALIGN wyrównać tekst podpisu względem któregoś z marginesów lub wyśrodkować go. Ta metoda działa także w programie Internet Explorer 4.

Jeśli chcesz umieścić pod tabelą podpis wyrównany do prawego marginesu, w wersji dla przeglądarki Internet Explorer musisz wprowadzić taki kod:

<caption valign="BOTTOM" align="RIGHT">To jest podpis</caption>

Aby uzyskać żądany rezultat nie tylko w Internet Explorerze, ale także w przeglądarce Netscape Navigator, możesz zastosować element <DIV>:

<caption valign="BOTTOM"><div align="RIGHT">To jest podpis</div> </caption>

W zasadzie, jeśli Twoje tabele nie są bardzo krótkie, powinieneś pozostawić podpis w jego domyślnym ulokowaniu, to znaczy wyśrodkowany u góry tabeli, aby czytelnicy najpierw zobaczyli podpis tabeli i zapoznali się z jej tematyką. Jeśli pojawi się on pod tabelą, czytelnicy będą musieli najpierw przeczytać tabelę, zanim zobaczą jej podpis, a wówczas nie będzie on już potrzebny, bo sami zorientują się, co przedstawia tabela.

Komórki rozpięte
na kilku wierszach lub kolumnach

W dotychczas tworzonych przez nas tabelach, na jedną komórkę przypadała jedna wartość, ewentualnie była to komórka pusta. Można również utworzyć takie komórki, które rozpięte są na wielu wierszach lub kolumnach tabeli. Takie komórki najczęściej zawierają nagłówki dzielące się w kolejnych wierszach lub kolumnach na sekcje. Mogą one także posłużyć do urozmaicania układu tabeli. Rysunek 11.18 pokazuje tabelę zawierającą komórki rozpięte na kilku wierszach i (lub) kolumnach.

Rysunek 11.18. Tabela, której komórki rozpięte są na kilku wierszach i (lub) kolumnach

Aby stworzyć komórkę rozpiętą na kilku wierszach i (lub) kolumnach, należy do znacznika <TH> lub <TD> dodać atrybuty ROWSPAN i/lub COLSPAN oraz przypisać im odpowiednie wartości, które określą liczbę wierszy i (lub) kolumn, na których komórka jest rozpięta. Dane umieszczone w takiej komórce wypełnią obszar o długości i (lub) szerokości odpowiadającej rozpiętości, jak w poniższym przykładzie:

<html>

<head>

<title>Rozpinanie komórek na wiersze i kolumny</title>

</head>

<body>

<table border="1">

<tr>

<th colspan=2>Płeć</th>

</tr>

<tr>

<th>Mężczyzna</th>

<th>Kobieta</th>

</tr>

<tr>

<td>15</td>

<td>23</td>

</tr>

</table>

</body>

</html>

Taka tabela mogłaby wyglądać tak, jak tabela z rysunku 11.19.

Rysunek 11.19. Komórka rozpięta na kolumnach

Zwróć uwagę, że w przypadku rozpinania komórki na kilku wierszach i (lub) kolumnach, nie ma potrzeby definiowania kolejnych komórek jako pustych, obszar takiej komórki obejmuje wskazaną liczbę wierszy i (lub) kolumn. Można je zignorować i przejść do następnej komórki w wierszu.

Komórki rozpinane są w dół i w prawo. Tak 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.

Kolejny przykład to kod źródłowy tworzący komórki rozpięte na kilku wierszach (jest to komórka zawierająca wyraz Tłok). Rezultat pokazany jest na rysunku 11.20.

	<html> <head> <title>Luz pierścienia</title> </head> <body> <table border="1"> <tr> <th colspan="2">&nbsp;</th> <th>Luz<br />pierścienia</th> </tr> <tr align="center"> <th rowspan="2">Tłok</th> <th>Górny</th> <td>3mm</td> </tr> <tr align="center"> <th>Dolny</th> <td>3.2mm</td> </tr> </table> </body> </html>
Rysunek 11.20. Komórka rozpięta na dwóch wierszach

Ćwiczenie 11.2: Tabela specyfikacji serwisowych

Czy masz już dość tabel? Zróbmy jeszcze jeden przykład, w którym wykorzystamy wszystko, czego zdążyłeś się nauczyć: będzie to tabela z nagłówkami i zwykłymi komórkami, do której zastosujemy wyrównanie i wprowadzimy komórki rozpięte na wierszach i komórkach. Jak widzisz będzie ona bardzo skomplikowana, ale proces jej tworzenia przeanalizujemy krok po kroku.

Rysunek 11.21 prezentuje tabelę zawierającą informacje serwisowe z instrukcji obsługi samochodu.

Rysunek 11.21. Bardzo skomplikowana tabela zawierająca specyfikacje serwisowe

Tabela ma pięć wierszy i pięć kolumn. Widzisz je? Niektóre z nich rozpięte są na innych kolumnach i wierszach. Rysunek 11.22 prezentuje tę samą tabelę, do której wprowadzono obramowania — teraz możesz dokładnie zobaczyć jej budowę.

Rysunek 11.22. Pięć kolumn i pięć wierszy

W takiej tabeli jak ta, gdzie utworzono wiele rozpiętych komórek, wyświetlenie obramowań pomaga zobaczyć konstrukcję rozpięć. Pamiętaj, że początkowym punktem rozpiętej komórki jest jej górna lub lewa krawędź.

Gotowy? Zaczynamy od szkieletu strony, tak jak w przypadku poprzednich przykładów:

<html>

<head>

<title>Dane serwisowe</title>

</head>

<body>

<table border="1">

<caption>Odchylenie pasa napędowego</caption>

</table>

</body>

</html>

Aby uatrakcyjnić wygląd tabeli wszystkim jej komórkom przypisz jasnożółty kolor tła (#ffffcc), posługując się przy tym atrybutem BGCOLOR. Poza tym, zwiększ szerokość obramowania tabeli do 5 pikseli i przypisz jej ciemnozłoty kolor (#cc9900), wykorzystując w tym celu atrybut BORDERCOLOR działający poprawnie zarówno w Internet Explorerze, jak i w Netscape Navigatorze. Następnie, zapewnij, aby linie pomiędzy komórkami tabeli były wyraźniejsze; w tym celu atrybutowi CELLSPACING przypisz wartość 0 oraz zwiększ ostępy pomiędzy zawartością komórek a jej brzegami, przypisując atrybutowi CELLPADDING wartość 5. Nowa definicja tabeli ma następującą postać:

<table border="5"

bgcolor="#ffffcc"

bordercolor="#cc9900"

cellspacing="0"

cellpadding="5">

Utwórz teraz pierwszy wiersz. Dzięki wyświetlonym obramowaniom możesz zobaczyć, że pierwsza komórka jest pusta i rozpięta na dwóch wierszach i dwóch kolumnach (patrz rysunek 11.23). Odpowiedni kod HTML będzie więc wyglądał w następujący sposób:

<tr>

<th rowspan="2" colspan="2"></th>

Rysunek 11.23. Pierwsza komórka

Druga komórka wiersza to nagłówek Odchylenie używanego pasa. Jest rozpięta na dwóch kolumnach. Oto jej kod:

<th colspan="2">Odchylenie używanego pasa</th>

W tym wierszu pozostała jeszcze ostania komórka, podobnie jak pierwsza, jest ona rozpięta na dwóch wierszach:

<th rowspan="2">Ustawienia odchylenia nowego pasa</th>

Przejdźmy teraz do drugiego wiersza. Nie jest nim wiersz, którego nagłówek brzmi Alternator. Jak sobie przypominasz, pierwsza komórka poprzedniego wiersza jest rozpięta na dwóch kolumnach i dwóch wierszach. Oznacza to, że pierwsza komórka drugiego wiersza jest wbudowana w rozpiętą komórkę. Nie musisz jej ponownie definiować, przechodzisz po prostu do następnej wskazanej przez obramowania. Jest nią komórka nagłówka Limit, a po niej następuje komórka Dopasowanie odchylenia:

<tr>

<th>Limit</th>

<th>Dopasowanie odchylenia</th>

</tr>

A co z ostatnią komórką? Podobnie jak pierwsza, ta również jest wbudowana w komórkę rozpiętą na dwóch wierszach i kolumnach. Tak więc, jedyne wielkości konieczne w tym wierszu zostały już zdefiniowane.

Czy wszystko jest na razie jasne? Czas byś spróbował podglądnąć swoją tabelę w przeglądarce, by sprawdzić jej układ. Na razie wygląda ona nieco śmiesznie, bowiem lewa strona jest całkowicie pusta, ale nie przejmuj się. Rysunek 11.24 pokazuje aktualny stan naszych działań.

Rysunek 11.24. Oto początki naszej tabeli

Następny wiersz! Jeśli to konieczne, rzuć okiem na obramowania. Pierwszą komórką tego wiersza jest komórka nagłówka, o zawartości Alternator, która jest rozpięta na tym wierszu i następnym. Czy wiesz już o co tu chodzi?

<tr>

<th rowspan="2">Alternator</th>

Następne trzy komórki to łatwizna, bowiem nie są one rozpięte. Oto ich definicje:

<td>Bez AC</td>

<td>10 mm</td>

<td>5-7 mm</td>

Ostatnia komórka jest taka sama jak pierwsza:

<td rowspan="2">5-7 mm</td>

</tr>

Przechodzimy do wiersza czwartego. Ze względu na obecność atrybutu ROWSPAN w definicji poprzedniego wiersza, są w nim jedynie trzy komórki: jedna zawierająca napis Modele z AC oraz dwie z liczbami:

<tr>

<td>AC</td>

<td>12 mm</td>

<td>6-8 mm</td>

</tr>

W tej tabeli komórka Alternator jest komórką nagłówka, a komórki zawierające tekst Modele z AC i Modele bez AC są komórkami danych. U podstaw mojej decyzji takiego, a nie innego sposobu sformatowania leżały wyłącznie względy natury estetycznej. Nic nie stało na przeszkodzie, by wszystkie komórki były komórkami nagłówka

Oto i ostatni wiersz, nie powinien być trudny. Pierwsza komórka (Elektryczna pompa olejowa) jest rozpięta na dwóch kolumnach (jednej zawierającej komórkę Alternator i drugiej, w której znalazły się komórki Modele z AC i Modele bez AC). Pozostałe trzy komórki są pojedyncze:

<tr>

<th colspan="2">Elektryczna pompa olejowa</td>

<td>12 mm</td>

<td>7.9 mm</td>

<td>6-8 mm</td>

</tr>

Oto wszystko. Zakończyłeś pracę nad układem tabeli. Najtrudniejszy etap tworzenia tabeli masz za sobą. Teraz pozostały jedynie drobne prace kosmetyczne. Przyjrzyj się tabeli raz jeszcze w przeglądarce, by sprawdzić, czy nie ma jakichś większych błędów (patrz rysunek 11.25).

Rysunek 11.25. Tabela — następny krok

Skoro wiersze i kolumny są już na właściwych miejscach, zajmij się wyrównaniem zawartości komórek. Liczby powinny zostać wycentrowane, a ponieważ stanowią one podstawową zawartość tabeli, zastosujmy centrowanie jako domyślny sposób wyrównania każdego z wierszy:

<tr align="center">

Możemy jeszcze poprawić wygląd etykiet Alternator, Modele z AC, Modele bez AC oraz Elektryczna pompa olejowa, wyrównując je do lewego marginesu:

<th rowspan="2" align="left">Alternator</th>

<td align="left">Modele bez AC</td>

<td>Modele z AC</td>

<th colspan="2" align="left">Elektryczna pompa olejowa</th>

Jeszcze parę ostatnich korekt, wprowadziłam łamania wiersza tam, gdzie nagłówki były za długie, aby zmniejszyć szerokość kolumn. Ponieważ tekst nagłówków nie jest długi, nie muszę się martwić, że tabela będzie wyglądać śmiesznie, gdy stanie się zbyt wąska. Oto wiersze, które zmodyfikowałem:

<th rowspan="2">Ustawienia odchylenia<BR>nowego pasa</th>

<th>Dopasowanie<BR>odchylenia</th>

I jeszcze ostatnia czynność, wyrównam tytuł tabeli do lewej krawędzi strony:

<caption align="left">Odchylenie pasa napędowego</caption>

Voil* — oto tabela, której elementy są odpowiednio ułożone, a zawartość wyrównana. Rysunek 11.26 pokazuje efekt końcowy.

Rysunek 11.26. Tabela: Odchylenie pasa napędowego
	Jeśli w którymkolwiek momencie straciłeś wątek, najlepszym rozwiązaniem jest sięgnąć po ulubiony edytor tekstu i spróbować samemu, znacznik po znaczniku. Po kilku próbach nie będzie to dla Ciebie straszne.

Oto pełny kod źródłowy naszej tabeli:

<html>

<head>

<title>Dane serwisowe</title>

</head>

<body>

<table border="5" bgcolor="#ffffcc" bordercolor="#cc9900"

cellspacing="0" cellpadding="5">

<caption align="left">Odchylenie pasa napędowego</caption>

<tr>

<th rowspan="2" colspan="2"></th>

<th colspan="2">Odchylenie używanego pasa</th>

<th rowspan="2">Ustawienia odchylenia<br>nowego pasa</th>

</tr>

<tr>

<th>Limit</th>

<th>Dopasowanie<br>odchylenia</th>

</tr>

<tr align="center">

<th rowspan="2" align="left">Alternator</td>

<td align="left">Modele bez AC</td>

<td>10 mm</td>

<td>5-7 mm</td>

<td rowspan="2">5-7 mm</td>

</tr>

<tr align="center">

<td align="left">Modele z AC</td>

<td>12 mm</td>

<td>6-8 mm</td>

</tr>

<tr align="center">

<th colspan="2" align="left">Elektryczna pompa olejowa</td>

<td>12 mm</td>

<td>7.9 mm</td>

<td>6-8 mm</td>

</tr>

</table>

</body>

</html>

Bardziej zaawansowane możliwości
ulepszania tabel

Możesz mi wierzyć lub nie, lecz w końcu, po tych wszystkich ćwiczeniach i przykładach, zbliżasz się do momentu poznania elementów tabel wprowadzonych w wersji 4.0 języka HTML. Nowa wersja HTML-a zawiera wiele usprawnień związanych ze sposobem definiowania wierszy i kolumn tabeli; przedstawię je w tej części rozdziału.

Grupowanie i określanie wyrównania kolumn

Jednym z ulepszeń związanych z tworzeniem tabel, jakie wprowadzono w HTML-u 4.0, jest możliwość wyświetlania tabel w sposób przyrostowy, dzięki czemu tabela może być wyświetlana częściowo jeszcze zanim zostaną pobrane wszystkie umieszczone w niej informacje. Po części efekt taki można osiągnąć, definiując kolumny tabeli, przy użyciu elementów <COLGROUP> oraz <COL>. Pozwalają one autorom stron WWW na określenie struktury kolumn tabeli i dalsze określanie ich wyglądu przy wykorzystaniu arkuszy stylów.

Znaczniki <COLGROUP> oraz </COLGROUP> służą do definiowania grup kolumn. W ich skład może wejść jedna lub kilka kolumn. Znacznik <COLGROUP> posiada dwa atrybuty.

• SPAN — atrybut określa ilość kolumn w grupie. Jego wartość musi być liczbą całkowitą większą od zera. Jeśli atrybut nie zostanie podany, to domyślnie znacznik <COLGROUP> zakłada, że grupa składa się z jednej kolumny. Jeśli jednak wewnątrz znacznika <COLGROUP> zostanie umieszczony jeden (lub kilka) znaczników <COL>, to atrybut SPAN zostanie zignorowany,

• WIDTH — atrybut określa szerokość każdej kolumny należącej do danej grupy. Szerokość ta może zostać określona jako ilość pikseli, wielkość procentowa lub wartość względna. Określając szerokość, można także użyć specjalnego symbolu "0*" (cyfry 0 i gwiazdki). Oznacza on, że szerokością każdej kolumny grupy powinna być minimalna szerokość konieczna do wyświetlenia zawartości każdej komórki kolumny. Jeśli jednak posłużysz się tym specjalnym symbolem, to przeglądarki nie będą w stanie wyświetlać tabeli w sposób przyrostowy.

Załóżmy, że stworzyłeś tabelę o szerokości 450 pikseli, składającą się z sześciu kolumn. Chciałbyś, aby każda z kolumn miała szerokość 75 pikseli. Kod jakiego powinieneś użyć może mieć następującą postać:

<table border="1" width="450">

<colgroup span="6" width="75">

</colgroup>

Teraz chcesz zmienić układ kolumn. Tę samą tabelę o szerokości 450 pikseli zmodyfikujesz w taki sposób, aby pierwsze dwie kolumny miały szerokość 25 pikseli, a pozostałe 4 - 100 pikseli. Tak modyfikacja wymaga użycia dwóch znaczników <COLGROUP>:

<table border="1" width="450">

<colgroup span="2" width="25">

</colgroup>

<colgroup span="4" width="100">

</colgroup>

A jeśli nie chcesz, aby wszystkie kolumny należące do grupy miały tę samą szerokość lub taki sam wygląd? Do tego właśnie służy element <COL>. Element <COLGROUP> służy do definiowania struktury kolumn tabeli, natomiast <COL>, do określania ich atrybutów. Aby użyć tego elementu należy rozpocząć definicję kolumny od znacznika <COL>. W tym przypadku nie wolno stosować znacznika zamykającego.

Wróćmy do naszej przykładowej tabeli. Tym razem chcesz, aby obie kolumny pierwszej grupy miały szerokość 75 pikseli. Natomiast kolumny w drugiej grupie mają mieć odpowiednio szerokości: 50, 75, 75 oraz 100 pikseli. Poniżej pokazałam, w jaki sposób można sformatować drugą grupę kolumn przy wykorzystaniu znaczników <COL>:

<table border="1" width="450">

<colgroup span="2" width="75">

</colgroup>

<colgroup>

<col span="1" width="50">

<col span="2" width="75">

<col span="1" width="100">

</colgroup>

Teraz wykorzystamy poznane znaczniki w prawdziwym przykładzie. Będzie on przedstawiał tabelę wyświetlającą rozkład zajęć. Tworzenie przykładu rozpoczniesz od zdefiniowania tabeli o obramowaniu szerokości 1 piksela, zajmującej 100% szerokości strony.

Następnie zdefiniujesz grupy kolumn. W pierwszej grupie kolumn zostaną wyświetlone nazwy zajęć. Druga grupa będzie się składać z dwóch kolumn. W pierwszej z nich będą wyświetlane numery sal, w jakich odbędą się zajęcia; a w drugiej — czas rozpoczęcia zajęć oraz ich długość. Atrybuty ALIGN oraz VALIGN stosowane w znacznikach <COL> oraz <COLGRUP> przedstawione w poprzedniej części rozdziału, nie zostały uznane za przestarzałe w HTML-u 4.0, a zatem będziesz mógł posłużyć się nimi. Pierwsza grupa kolumn składa się tylko z jednej kolumny, której komórki mają szerokość 20% szerokości tabeli. Zawartość tych komórek ma być wyrównana w pionie do górnej krawędzi komórki oraz wyśrodkowana w poziomie. Druga grupa składa się z dwóch kolumn, z których każda ma szerokość 40 procent całkowitej szerokości tabeli. Zawartość komórek tych kolumn ma być wyrównana w pionie do górnej krawędzi komórek.

Na samym końcu wpisz zawartość tabeli, zupełnie tak samo, jak robiłeś to do tej pory. Poniżej przedstawiłam pełny kod przykładu tabeli z planem zajęć. Jej wygląd (w Internet Explorerze) przedstawiłam na rysunku 11.27.

	<html> <head> <title>Grupowanie kolumn</title> </head> <body> <table border="1" width="100%"> <caption><b>Plan zajęć</b></caption> <colgroup width="20%" align="CENTER" valign="TOP"> <colgroup span="2" width="40%" valign="TOP"> <tr> <th>Zajęcia</th> <th>Sala</th> <th>Godzina</th> </tr> <tr> <td>Biologia</td> <td>Sala 102</td> <td>8:00 do 9:45</td> </tr> <tr> <td>Chemia</td> <td>Sala 110</td> <td>9:50 do 11:30</td> </tr> <tr> <td>Fizyka</td> <td>Sala 107</td> <td>13:00 do 14:45</td> </tr> <tr> <td>Geometria</td> <td>Sala 236</td> <td>8:00 do 9:45</td> </tr> <tr> <td>Algebra</td> <td>Sala 239</td> <td>9:50 do 11:30</td> </tr> <tr> <td>Trygonometria</td> <td>Sala 245</td> <td>13:00 do 14:45</td> </tr> </table> </body> </html>
Rysunek 11.27. Tabela planu zajęć ze sformatowanymi grupami kolumn

Grupowanie i określanie wyrównania wierszy

Teraz, kiedy już znasz nowy sposób grupowania i formatowania kolumn, zajmiemy się wierszami tabel. Wiersze można zgrupować w trzech sekcjach: w nagłówku tabeli, w jej stopce oraz w ciele tabeli. Zalety takiego formatowania są widoczne w przeglądarkach zgodnych z HTML-em 4.0. Po pierwsze treść tabeli może być przewijana niezależnie od jej nagłówka i stopki. Co więcej, w przypadku drukowania tabeli zawierającej wiele wierszy, nagłówek oraz stopka tabeli pojawią się na każdej stronie wydruku. Dodatkowo, można wykorzystać kaskadowe arkusze stylów, aby nadać odrębny wygląd nagłówkowi i stopce tabeli oraz jej zawartości.

Sekcje tabeli: nagłówek, stopka oraz ciało są definiowane przy użyciu elementów <THEAD>, <TFOOT> oraz <TBODY>. Każdy z tych elementów musi zawierać identyczną ilość kolumn.

Element <THEAD>…</THEAD> definiuje nagłówek tabeli zawierający informacje o kolumnach umieszczonych w ciele tabeli. Zazwyczaj zawiera on ten sam typ informacji, które umieszczałeś w komórkach nagłówka tabeli we wszystkich przykładach przedstawionych we wcześniejszej części rozdziału. Jeśli chcesz zdefiniować w tabeli sekcję nagłówka, musisz ją rozpocząć od znacznika <THEAD>; zamykający znacznik </THEAD> jest jednak opcjonalny.

Nagłówek tabeli można umieścić bezpośrednio po znaczniku <TABLE> lub po znaczniku <COLGROUP>, tak jak pokazałam w kolejnym przykładzie. Wewnątrz nagłówka musisz umieścić przynajmniej jedną grupę wierszy, zdefiniowaną przy użyciu znacznika <TR>. Nagłówek tabeli może mieć następującą postać:

<table border="1" width="100%">

<caption><b>Plan zajęć</b></caption>

<colgroup width="20%" align="center" valign="top">

<colgroup span="2" width="40%" valign="top">

<thead>

<tr>

<th>Zajęcia</th>

<th>Sala</th>

<th>Godzina</th>

</tr>

</thead>

Element <TFOOT>…</TFOOT> definiuje stopkę tabeli. Zawsze musi się ona zaczynać od znacznika <TFOOT>, natomiast zamykający znacznik </TFOOT> jest opcjonalny. Stopka tabeli jest definiowana bezpośrednio po nagłówku (jeśli został on zdefiniowany) lub po znaczniku <TABLE>, jeśli nagłówek tabeli nie został podany. Stopka tabeli musi zawierać przynajmniej jedną grupę wierszy zdefiniowanych przy użyciu znacznika <TR>. W stopce tabeli można umieścić, na przykład, sumę liczb zapisanych w komórkach danej kolumny tabeli.

Stopkę koniecznie należy podać przed treścią tabeli. Wynika to z faktu, iż przeglądarka musi określić postać stopki, zanim pobierze wszystkie dane umieszczone w treści tabeli. W naszym przykładzie, w stopce tabeli umieścimy te same informacje, co w jej nagłów­ku. Oto kod stopki naszej przykładowej tabeli:

<tfoot>

<tr>

<th>Zajęcia</th>

<th>Sala</th>

<th>Godzina</th>

</tr>

</tfoot>

Po zdefiniowaniu nagłówka i stopki tabeli, można podać wiersze tworzące jej ciało. Tabela może zawierać więcej niż jedną sekcję ciała, a każda z nich musi zawierać przynajmniej jeden wiersz danych. Czy wszystko już Ci się dokładnie pomieszało i zastanawiasz się, w jaki sposób należy używać tych wszystkich znaczników i jak one dzia­łają? Poniżej przedstawię przykład prezentujący, dlaczego sekcje są tak ciekawym rozwiązaniem.

Elementu <TBODY>…</TBODY> można użyć do zdefiniowania jednej lub kilku sekcji ciała tabeli. Początkowy znacznik <TBODY> musi został podany, jeśli przynajmniej jeden z poniższych warunków jest spełniony:

• tabela zawiera sekcje nagłówka lub stopki,

• tabela zawiera więcej niż jedną sekcję ciała.

Przedstawiona poniżej przykładowa tabela zawiera dwie sekcje ciała, a każda z nich składa się z trzech wierszy i trzech kolumn. Dwie sekcje ciała tabeli, umieszczone po jej nagłówku, mają następującą postać:

<tbody>

<tr>

<td>Biologia</td>

<td>Sala 102</td>

<td>8:00 do 9:45</td>

</tr>

<tr>

<td>Chemia</td>

<td>Sala 110</td>

<td>9:50 do 11:30</td>

</tr>

<tr>

<td>Fizyka</td>

<td>Sala 107</td>

<td>13:00 do 14:45</td>

</tr>

</tbody>

<tbody>

<tr>

<td>Geometria</td>

<td>Sala 236</td>

<td>8:00 do 9:45</td>

</tr>

<tr>

<td>Algebra</td>

<td>Sala 239</td>

<td>9:50 do 11:30</td>

</tr>

<tr>

<td>Trygonometria</td>

<td>Sala 245</td>

<td>13:00 do 14:45</td>

</tr>

</tbody>

Po połączeniu wszystkich sekcji tabeli w jedną całość, otrzymamy tabelę przedstawioną na rysunku 11.28.

Rysunek 11.28. Plan zajęć w postaci tabeli posiadającej nagłówek, ciało oraz stopkę

Atrybuty FRAME oraz RULES

Jeśli spojrzysz na poprzedni przykład, to wcale nie jest oczywiste, które komórki tabeli należą do poszczególnych grup kolumn i wierszy. Prostym sposobem określenia przynależności poszczególnych komórek jest wykorzystanie atrybutów FRAME oraz RULES znacz­nika <TABLE>.

Atrybut FRAME określa wygląd zewnętrznego obramowania tabeli. Dostępnych jest kilka specjalnych wartości, których można użyć do określenia, jakie części zewnętrznego obramowania tabeli będą widoczne.

void	Wartość domyślna. Żadna krawędź zewnętrznego obramowania tabeli nie jest widoczna.
above	Wyświetlana jest wyłącznie górna krawędź obramowania tabeli.
below	Wyświetlana jest wyłącznie dolna krawędź obramowania tabeli.
hsides	Wyświetlane są górna i dolna krawędź obramowania tabeli.
lhs	Wyświetlana jest lewa krawędź obramowania tabeli.
rhs	Wyświetlana jest prawa krawędź obramowania tabeli.
vsides	Wyświetlane są prawa i lewa krawędź obramowania tabeli.
box	Wyświetlane są wszystkie cztery krawędzie obramowania tabeli.
border	Wyświetlane są wszystkie cztery krawędzie obramowania tabeli.

Atrybut RULES jest nieco podobny do atrybutu FRAME, z tą różnicą, iż służy on do definiowania linii wyświetlanych pomiędzy komórkami tabeli. Poniżej podałam wartości, które można przypisać temu atrybutowi.

none	Wartość domyślna. Wewnątrz tabeli nie będą wyświetlane żadne linie.
groups	Linie będą wyświetlane wyłącznie pomiędzy grupami wierszy zdefiniowanymi przy użyciu znaczników <THEAD>, <TFOOT> i <TBODY> oraz pomiędzy grupami kolumn zdefiniowanymi przy użyciu znaczników <COLGROUP> oraz <COL>.
rows	Linie pojawią się wyłącznie pomiędzy wierszami tabeli.
cols	Linie pojawią się wyłącznie pomiędzy kolumnami tabeli.
all	Linie zostaną wyświetlone pomiędzy wszystkimi wierszami i kolumnami tabeli.

Dysponując tymi informacjami, możesz sprawić, aby grupy kolumn i wierszy w naszej przykładowej tabeli były lepiej widoczne. Chcesz, aby wokół tabeli zostało wyświetlone obramowanie, jednak ma się ono pojawić wyłącznie wzdłuż jej górnej i dolnej krawędzi. W tym celu umieścisz w znaczniku <TABLE> atrybut FRAME="hsides".

Wewnątrz tabeli oddzielisz liniami wszystkie sekcje tabeli — nagłówek, stopkę oraz obie sekcje ciała. Poza tym oddzielisz liniami obie grupy kolumn — zajęcia oraz informacje o salach i godzinach zajęć. Wszystkie te modyfikacje można wprowadzić, umieszczając w znaczniku <TABLE> atrybut RULES="groups".

Wszystkie powyższe modyfikacje można wprowadzić, dodając dwa atrybuty do jednej linijki kodu. Poniżej przedstawiłam nową postać definicji tabeli, natomiast sama tabela, wyświetlona w Internet Explorerze, została pokazana na rysunku 11.29.

<TABLE BORDER="1" WIDTH="100%" FRAME="hsides" RULES="groups">

Rysunek 11.29. Tabela planu zajęć ze zdefiniowanymi liniami pomiędzy grupami kolumn i wierszy

Inne elementy i atrybuty tabel

W tabeli 11.1 przedstawiłam kilka dodatkowych elementów i atrybutów związanych z tabelami.

Tabela 11.1.

Inne elementy i atrybuty tabel

Atrybut	Używany w elementach
CHAR	w komórkach i kolumnach tabel	Określa znak, którego należy użyć jako osi do wyrównania zawartości komórki. Na przykład, można go użyć do wyrównania przecinka dziesiętnego w wartościach liczbowych. Atrybut ten może zostać użyty w znacznikach <COLGROUP>, <COL>, <TBODY>, <THEAD>, <TFOOT>, <TR>, <TD> oraz <TH>.
CHAROFF	w komórkach i kolumnach tabel	Określa wielkość przesunięcia pierwszego wystąpienia znaku, według którego jest wyrównywana zawartość komórki (określonego atrybutem CHAR). Atrybut ten może zostać użyty w znacznikach <COLGROUP>, <COL>, <TBODY>, <THEAD>, <TFOOT>, <TR>, <TD> oraz <TH>.
SUMMARY	<TABLE>	Określa bardziej szczegółowy opis zawartości tabeli. Przede wszystkim jest on wykorzystywany w przeglądarkach, które nie prezentują zawartości stron w sposób wizualny.

Podsumowanie

Tematem tego rozdziału były tabele. Tabele umożliwiają organizację danych w wierszach i kolumnach. Dzięki takiemu układowi, czytelnik ma szybki dostęp do potrzebnych mu informacji.

Dowiedziałeś się z tego rozdziału, jak definiować nagłówki, dane, podpisy, wiersze, komórki, sposób wyrównania zawartości komórki i komórki, które rozpięte są na wielu wierszach i (lub) kolumnach. Wiedza ta pomoże Ci przygotowywać tabele służące najróżniejszym celom.

A teraz parę rad, które będą Ci pomocne przy konstruowaniu tabeli:

• naszkicuj kolumny i wiersze tabeli. Zaznacz komórki, które rozpięte są na kilku wierszach i (lub) kolumnach,

• rozpocznij od podstawowego szkieletu strony i uzupełniaj go o wiersze, nagłówki i dane tabeli, wpisując odpowiednie kody HTML, wiersz po wierszu, komórka po komórce. Jeśli to konieczne, wprowadź komórki, które rozpięte są na kilku wierszach i (lub) kolumnach. Często testuj kod w przeglądarce,

• zdefiniuj taki sposób wyrównania wierszy, który odzwierciedla wyrównanie większości komórek,

• zmień sposób wyrównania w określonych komórkach,

• jeśli to konieczne, wprowadź łamania wiersza,

• dopracuj wygląd tabeli, wprowadzając odstępy między komórkami, odstępy między zawartością komórki a jej obramowaniem i definiując kolory,

• przetestuj tabele w wielu przeglądarkach. Zazwyczaj różne przeglądarki wyświetlają tabele w różny sposób. Mogą także być mniej lub bardziej liberalne dla Twoich błędów w kodzie HTML.

Tabela 11.2 zawiera krótkie podsumowanie wszystkich elementów tabel, jakie poznałeś w tym rozdziale i które wciąż są stosowane w standardzie HTML 4.0. Atrybuty każdego z tych elementów zostały podane w tabeli 11.3.

Tabela 11.2:

Elementy tabel dostępne w HTML 4.0.

Znacznik	Zastosowania
<TABLE>…</TABLE>	Definiuje tabelę.
<CAPTION>…</CAPTION>	Tworzy opcjonalny podpis tabeli.
<COLGROUP>…<COLGROUP>	Definiuje grupę składającą się z jednej lub z kilku kolumn.
<COL>…</COL>	Stosowany do określania atrybutów konkretnej kolumny tabeli.
<THEAD>…</THEAD>	Tworzy grupę wierszy definiujących nagłówek tabeli. Tabela może zawierać tylko jeden nagłówek.
<TFOOT>…</TFOOT>	Tworzy grupę wierszy definiujących stopkę tabeli. Tabela może zawierać tylko jeden nagłówek. Stopka musi zostać zdefiniowana przed treścią tabeli.
<TBODY>…</TBODY>	Definiuje jedną lub kilka grup wierszy umieszczonych wewnątrz tabeli. Tabela może zawierać kilka takich sekcji.
<TR>…</TR>	Definiuje wiersz tabeli, który może zawierać nagłówek lub dane.
<TH>…</TH>	Definiuje komórkę zawierającą nagłówek. Zawartość komórek nagłówka jest zazwyczaj wyświetlana czcionką pogrubioną i jest centrowana zarówno w pionie, jak i w poziomie.
<TD>…</TD>	Definiuje komórkę zawierającą dane. Zawartość komórek danych jest zazwyczaj wyświetlana zwykłą czcionką i jest wyrównana do lewej krawędzi oraz centrowana w pionie.

Kilka atrybutów można zastosować w wielu różnych elementach tabel, z tego względu przedstawię je w osobnej tabeli. Tabela 11.3 zawiera krótkie podsumowanie informacji o atrybutach tabel przedstawionych w tym rozdziale, które wciąż są wykorzystywane w standardzie HTML 4.0.

Warsztat

Pytania i odpowiedzi

P. Pod względem układu tabele to koszmar. Szczególnie w przypadku komórek rozpiętych na wierszach lub kolumnach. Ostatni przykład był straszny.

Tabela 11.3.

Atrybuty tabel dostępne w HTML 4.0.

Atrybut	Stosowany do elementu	Zastosowanie
ALIGN	<TR>	Dostępne wartości to LEFT, RIGHT i CENTER, określa sposób wyrównania komórek danego wiersza w poziomie (ustawienie jest dominujące nad domyślnym ustawieniem wyrównania nagłówka i komórek tabeli).
	<TH>, <TD>	To ustawienie jest dominujące nad ustawieniem wyrównania wiersza i domyślnym ustawieniem wyrównania komórek tabeli.
	<THEAD>, <TBODY>, <TFOOT>	Stosowany od określania wyrównania zawartości komórek tabeli (zarówno nagłówka, stopki, jak i treści tabeli). Dostępne wartości to LEFT, CENTER oraz RIGHT.
	<COL>	Stosowany do określenia wyrównania zawartości wszystkich komórek danej kolumny tabeli. Dostępne wartości to LEFT, CENTER oraz RIGHT.
	<COLGROUP>	Stosowany do określania wyrównania zawartości komórek wszystkich kolumn tabeli należących do danej grupy. Dostępne wartości to LEFT, CENTER oraz RIGHT.
	<TABLE>	W HTML-u 4.0 uznany za przestarzały. Dostępne wartości to LEFT, CENTER oraz RIGHT. Wartość CENTER nie jest poprawnie obsługiwana w przeglądarkach zgodnych z HTML 3.2 i wcześniejszych. Określa sposób wyrównania tabeli i wskazuje, że towarzyszący tabeli tekst będzie ją otaczał.
	<CAPTION>	W HTML-u 4.0 uznany za przestarzały. Dla większości przeglądarek dostępne wartości to TOP i BOTTOM. W przeglądarkach zgodnych z HTML 4.0 dostępne są dwie dodatkowe wartości: LEFT oraz RIGHT. W przeglądarce Internet Explorer ma wartości LEFT, RIGHT i CENTER i określa sposób wyrównania podpisu w poziomie.
BGCOLOR	Wszystkie	(HTML 3.2, w HTML-u 4.0 przestarzały) Zmienia tło elementu tabeli. Ustawienia kolorów komórek dominują nad ustawieniami kolorów tabeli. Wartością jest liczba szesnastkowa lub nazwa koloru.
BORDER	<TABLE>	Określa, czy tabela zostanie obramowana. Domyślnie obramowanie nie jest rysowane. Jeśli ma wartość, definiuje ona szerokość trójwymiarowego obramowania wokół tabeli.
BORDERCOLOR	<TABLE>	(Rozszerzenie programu Internet Explorer i Netscape.) Może być stosowany z dowolnym znacznikiem tabeli. Zmienia kolor obramowania elementu tabeli. Wartością jest liczba szesnastkowa lub nazwa koloru
BORDERCOLORLIGHT	<TABLE>	(Rozszerzenie programu Internet Explorer.). Identyczny z BORDERCOLOR, z tym wyjątkiem, iż ustala kolor rozjaśnienia trójwymiarowego obramowania.
BORDERCOLORDARK	<TABLE>	Rozszerzenie programu Internet Explorer. Identyczny z BORDERCOLOR, z tym wyjątkiem, iż ustala kolor cienia trójwymiarowego obramowania.

Tabela 11.3.

Atrybuty tabel dostępne w HTML 4.0. (ciąg dalszy)

Atrybut	Stosowany do elementu	Zastosowanie
CELLSPACING	<TABLE>	Definiuje wolną przestrzeń między komórkami tabeli.
CELLPADDING	<TABLE>	Definiuje wolną przestrzeń między krawędziami komórki a jej zawartością.
CHAR		Określa znak, którego należy użyć jako osi do wyrównania zawartości komórki (na przykład, przecinek w wartościach liczbowych). Atrybut ten może zostać użyty w znacznikach <COLGROUP>, <COL>, <TBODY>, <THEAD>, <TFOOT>, <TR>, <TD> oraz <TH>.
CHAROFF		Określa wielkość przesunięcia pierwszego wystąpienia znaku, według którego jest wyrównywana zawartość komórki (określonego atrybutem CHAR). Atrybut ten może zostać użyty w znacznikach <COLGROUP>, <COL>, <TBODY>, <THEAD>, <TFOOT>, <TR>, <TD> oraz <TH>.
FRAME	<TABLE>	Określa, jakie krawędzie obramowania tabeli będą widoczne. Dostępne wartości to: void, above, below, hsides, lhs, rhs, box, border.
HEIGHT	<TH> lub <TD>	Przestarzały w HTML-u 4.0. Określa wysokość komórki tabeli wyrażoną w pikselach lub jako wartość procentowa.
NOWRAP	<TH> lub <TD>	Przestarzały w HTML-u 4.0. Zapobiega zawijaniu tekstu w komórce.
RULES	<TABLE>	Określa, jakie linie (podziału) pomiędzy komórkami tabeli będą widoczne. Dostępne wartości to: none, groups, rows, cols oraz all.
WIDTH	<TABLE>	Wskazuje szerokość tabeli w pikselach lub w procentach względem szerokości strony (na przykład, 50%).
SPAN	<COLGROUP>	Określa ilość kolumn należących do grupy. Wartością tego atrybutu musi być liczba całkowita większa od zera.
	<COL>	Określa ilość kolumn, które obejmuje dana komórka tabeli. Wartością tego atrybutu musi być liczba całkowita większa od zera.
WIDTH	<COLGROUP>	Określa szerokość wszystkich komórek w danej grupie kolumn.
	<COL>	Określa szerokość komórek danej kolumny.
COLSPAN	<TH> lub <TD>	Określa liczbę komórek na prawo od danej, na których jest ona rozpięta.
ROWSPAN	<TH> lub <TD>	Określa liczbę komórek poniżej danej, na których jest ona rozpięta.
VALIGN	<TR>	Określa sposób wyrównania komórek danego wiersza w pionie (ustawienie jest dominujące nad domyślnym). Dostępne wartości TOP, MIDDLE i BOTTOM.

Tabela 11.3.

Atrybuty tabel dostępne w HTML 4.0. (ciąg dalszy)

Atrybut	Stosowany do elementu	Zastosowanie
	<TH> lub <TD>	Ustawienie jest dominujące nad ustawieniem wyrównania wiersza i domyślnym ustawieniem wyrównania komórek tabeli. Dostępne wartości TOP, MIDDLE i BOTTOM. W Netscape ma również wartość BASELINE.
	<THEAD>, <TBODY>, <TFOOT>	Określa wyrównanie w pionie zawartości komórek nagłówka, stopki oraz treści tabeli.
	<COLGROUP>	Określa wyrównanie w pionie zawartości komórek należących do danej grupy kolumn.
	<COL>	Określa wyrównanie w pionie zawartości komórek danej kolumny tabeli.
WIDTH	<TH> lub <TD>	Przestarzały w HTML-u 4.0. Określa szerokość komórki wyrażoną w pikselach lub w procentach, względem szerokości strony (na przykład, 50%).

O. Masz rację. Ręczne tworzenie tabeli nie należy do przyjemności. Jeśli jednak jesteś programistą i piszesz filtry oraz narzędzia generowania kodu HTML, taki sposób definiowania tabeli ma sens, bowiem umożliwia on bezpośrednie przepisywanie zawartości wierszy. Wcześniej lub później wszyscy będziemy korzystać z filtrów HTML (mam nadzieję), więc ręczna praca nad tabelami nie potrwa długo.

P. Moje tabele działają wspaniale w Netscape Navigatorze, natomiast w innych przeglądarkach jest w nich bałagan. Gdzie popełniam błąd?

O. Czy nie zapomniałeś zamknąć któregoś ze elementów <TR>, <TH> i <TD>? Sprawdź, czy jest odpowiednia liczba znaczników zamykających </TR>, </TH> i </TD>. Pomimo, iż są one opcjonalne, często przeglądarki nie są w stanie bez nich poprawnie zinterpretować tabeli.

P. Czy można zagnieżdżać tabelę, umieszczając ją w komórce innej tabeli?

O. Oczywiście! Jak wspominałam w tym rozdziale, możesz w komórce umieszczać dowolny kod HTML, w tym także inną tabelę.

P. Dlaczego w przeważającej większości przypadków do określania położenia tytułu tabeli, wyświetlanego powyżej lub poniżej niej, używany jest atrybut ALIGN, a Internet Explorer działa zupełnie inaczej?

O. Nie wiem. A co gorsza, firma Microsoft twierdzi, że Internet Explorer działa w ten sposób ze względu na sposób definicji HTML-a 3.0. Jednak wykorzystane rozwiązanie nie zostało zdefiniowane ani w HTML-u 3.0, ani w HTML-u 3.2. HTML 4.0 proponuje dodanie atrybutów umożliwiających wyrównanie tytułu tabeli do lewej lub prawej, jednak w przeglądarce Internet Explorer te sposoby wyrównywania były dostępne, zanim w języku HTML pojawiły się jakiekolwiek wzmianki na temat takich możliwości.

Quiz

1. Jakie są podstawowe elementy tabel, jakie znaczniki je identyfikują?

2. Jaki jest najczęściej używany atrybut znacznika <TABLE>, do czego on służy?

3. Jakie atrybuty określają odległość pomiędzy zawartością tabeli a jej brzegami oraz pomiędzy poszczególnymi komórkami tabeli?

4. Jaki atrybuty są stosowane do tworzenia komórek zajmujących więcej niż jeden wiersz lub kolumnę tabeli?

5. Jakie elementy są używane do definiowania nagłówka, treści oraz stopki tabel?

Odpowiedzi

1. Podstawowymi elementami tabel (znacznika <TABLE>) są: obramowanie (definiowane przy użyciu atrybutu BORDER), tytuł (definiowany przy użyciu znacznika <CAPTION>), komórki nagłówka (<TH>), komórki danych (<TD>) oraz wiersze tabeli (<TR>).

6. Najczęściej stosowanym atrybutem tabel jest atrybut BORDER. Określa on, czy wokół tabeli mają być wyświetlane obramowania, a jeśli tak, to jakiej szerokości.

7. Atrybut CELLPADDING określa wielkość odstępu pomiędzy brzegami komórki a jej zawartością. Atrybut CELLSPACING definiuje wielkość odstępu pomiędzy poszczególnymi komórkami tabeli.

8. Atrybut ROWSPAN pozwala definiować komórki rozpięte na kilku wierszach, natomiast atrybut COLSPAN, komórki rozpięte na kilka kolumn.

9. Znaczniki <THEAD>, <TBODY> oraz <TFOOT> definiują odpowiednio nagłówek, ciało oraz stopkę tabeli.

Ćwiczenia

1. Oto łamigłówka, którą masz rozwiązać. Spróbuj stworzyć zagnieżdżoną tabelę (czyli tabelę wewnątrz tabeli). Stwórz prostą tabelę składającą się z trzech wierszy i trzech kolumn. Następnie wewnątrz komórki znajdującej się w drugim wierszu i drugiej kolumnie, stwórz następną tabelę składającą się z dwóch wierszy i dwóch kolumn.

10. Zmodyfikuj tabelę przedstawioną na rysunku 11.28 w taki sposób, aby linie wyświetlane wewnątrz niej były widoczne wyłącznie pomiędzy kolumnami tabeli (czyli w pionie).

330 Część 4. Arkusze stylów, tabele i ramki

Rozdział 11. Tabele 329

Wypełnienie powiększa odstęp pomiędzy zawartością komórki a jej obramowaniem

Obramowanie tabeli

Podpis

Nagłówki

Dane

Komórki

Atrybut CELLSPACING określa odległość pomiędzy komórkami tabeli

Za długi wiersz został zwinięty

Kolor rozjaśnienia trójwymiarowego obramowania tabeli

Kolor cienia trójwymiarowego obramowania tabeli

Komórka zawierająca dwa wiersze i dwie kolumny

Komórka zawierająca dwa wiersze

Kolumna 1

Komórka zawierająca dwie kolumny

Kolumna 2

Kolumna 3

Kolumna 4

Kolumna 5

Wiersz 1

Wiersz 2

Wiersz 3

Wiersz 4

Wiersz 5

Pierwsza komórka (zawiera dwie kolumny i dwa wiersze)

---