Kurs HTML. Wykład 4. Tworzenie tabel na stronie WWW. Umieszczanie grafiki w komórkach tabel.

Transkrypt

1 Wykład 4 Tworzenie tabel na stronie WWW. Umieszczanie grafiki w komórkach tabel. Tabele 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 korzystają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). 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. 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.

2 Aby utworzyć tabelę w HTML-u, naleŝy określić jej elementy i ich umiejscowienie, a wszystko otoczyć znacznikiem definiującym tabelę. Następnie poprawia się wygląd całości za pomocą wyrównania, obramowań i kolorowych komórek. Elementy tabeli W związku z kodem HTML-owym tworzącym tabelę, określa się kilka terminów, definiujących poszczególne elementy tejŝe tabeli: Podpis informuje o zawartości tabeli, na przykład, Wykaz ksiąŝek Biblioteki Narodowej. 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 zawartość komórek tabeli. Nagłówki i dane to tabela.

3 PoniŜej pokazano typową tabelę wraz z jej elementami. Podpis Nagłówek Komórka Dane Znacznik <TABLE> Do utworzenia tabeli w języku HTML stosuje się znacznik <TABLE> </TABLE>, który zawiera kod podpisu tabeli, jak i samą jej definicję, np.: <TABLE> tytuł tabeli (opcjonalny) i jej zawartość </TABLE> Aby pokazać, jak wygląda kod HTML pewnej typowej tabeli utworzono następujący kod:

4 <table border="1"> <caption>wykaz ksiąŝek</caption> <th>tytuł</th> <th>autor</th> <th>liczba stron</th> <th>format</th> <td>"smak Ŝycia"</td> <td>jan Kowalski</td> <td>150</td> <td>b5</td> <td>"pod kasztanem"</td> <td>zbigniew Nowak</td> <td>280</td> <td>a5</td> <td>"między nami..."</td> <td>emilia Mak</td> <td>60</td> <td>a4</td> </table> Oto przykład z wykorzystaniem tego kodu: plik1.html

5 Wiersze i komórki Wewnątrz znacznika <TABLE> </TABLE> umieszczana jest zawartość tabeli odpowiednio usadowiona w wierszach oraz komórkach. 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ę, naleŝy 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> (ang. table row). Z kolei kaŝdy z wierszy ma swoje komórki, które definiowane są za pomocą pary znaczników <TH> </TH> (ang. table header) (komórki 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 jest potrzebnych kolumn. Koniecznie naleŝy zadbać tylko o to, aby kaŝdy wiersz posiadał tę samą liczbę komórek, która wynika z liczby kolumn. Komórki umieszczone w wierszach tabeli są oznaczane przy uŝyciu dwóch znaczników: <TH> </TH> te znaczniki 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 zostać zakończone znacznikiem </TH>.

6 <TD> </TD> znaczniki te są uŝywane do tworzenia komórek danych. Litery td to skrót od słów ang. table data, czyli dane (zawartość) tabeli. KaŜda komórka tabeli rozpoczynająca się znacznikiem <TD> powinna zostać zakończona znacznikiem </TD>. 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: <th>tytuł</th> <th>autor</th> <th>liczba stron</th> <th>format</th> Po nagłówku w tabeli zostały umieszczone trzy wiersze składające się ze zwyczajnych komórek: <td>"smak Ŝycia"</td> <td>jan Kowalski</td> <td>150</td> <td>b5</td> itd. dla kolejnych dwóch wierszy.

7 Nagłówki moŝna wyświetlać nie tylko umieszczając je w pierwszym wierszu. Czasem moŝna jednak spotkać nagłówki umieszczone 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: <th>tytuł</th> <td>"smak Ŝycia"</td> <td>"pod kasztanem"</td> <td>"między nami..."</td> <th>autor</th> <td>jan Kowalski</td> <td>zbigniew Nowak</td> <td>emilia Mak</td> <th>liczba stron</th> <td>150</td> <td>280</td> <td>60</td> <th>format</th> <td>b5</td> <td>a5</td> <td>a4</td> plik2.html

8 Puste komórki Komórki tabel, czyli 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). W przypadku, gdy chcemy utworzyć komórkę, w której nic nie ma, definiuje się komórkę za pomocą elementów <TH> lub <TD>, a wewnątrz nie umieszcza się niczego: <table border="1"> <td></td> <td>dane 1</td> <td>dane 2</td> </table> Jednak niektóre przeglądarki wyświetlają puste komórki tego rodzaju w taki sposób, jakby w ogóle nie istniały. Jeśli chcemy zmusić przeglądarkę, by naprawdę wyświetliła pustą komórkę, moŝna w definicji komórki umieścić znacznik złamania wiersza <BR> lub kod spacji &nbsp. <table border="1"> <td><br></td> <td>dane 1</td> <td>dane 2</td> </table> plik3.html

9 Podpisy Podpisy tabeli słuŝą do informowania uŝytkownika strony o tym, czego dotyczy tabela. Do tworzenia podpisów słuŝy znacznik <CAPTION> zaprojektowany specjalnie w tym celu. Wyświetla on tytuł tabeli w formie podpisu (opcjonalne). Znacznik <CAPTION>...</CAPTION> umieszczany jest obrębie znacznika <TABLE>, przed definicjami wierszy i zawiera tytuł tabeli. <table> <caption align= left >Wykaz ksiąŝek</caption>... Znacznik <CAPTION> posiada atrybut align, który pozwala na umieszczenie podpisu w poziomie oraz valign, który odpowiada za umieszczenie podpisu w pionie W większości przeglądarek dostępne są następujące wartości znacznika align oraz valign: top - umieszcza podpis nad tabelą (domyślnie) (valign), bottom - umieszcza podpis pod tabelą (valign), left - umieszcza podpis z lewej strony tabeli (align), right - umieszcza podpis z prawej strony tabeli (align), center - i pośrodku tabeli (domyślnie) (align). plik4.html

10 Nagłówki w tabeli nie muszą zawsze znajdować się w pierwszym wierszu lub w pierwszej kolumnie. MoŜna oba sposoby umieszczania zastosować jednocześnie. PoniŜej przedstawiono przykład tabeli z tabliczką mnoŝenia : plik5.html Określanie rozmiarów tabel, obramowań oraz komórek Tworząc wygląd tabeli moŝna równieŝ skorzystać z atrybutów określających szerokość tabeli oraz jej komórek, odstęp pomiędzy brzegami komórek a ich zawartością, odległość między poszczególnymi wierszami i kolumnami tabeli oraz szerokość jej obramowań. Określanie szerokości tabeli W wielu przypadkach za określenie szerokości przedstawionej tabeli oraz jej poszczególnych kolumn odpowiada przeglądarka. 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. Mogą się jednak zdarzyć sytuacje, w których twórca strony wolałby dysponować większa kontrolą nad szerokością tabeli. W szczególności dotyczy to sytuacji, gdy domyślne ustawienia przeglądarki są wyjątkowo nietrafne.

11 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: <TABLE border="1" width="100%"> Przykład z procentami : Przykład z pikselami : plik6.html plik7.html Uwaga! Definiując szerokość tabeli, zawsze lepiej to zrobić w procentach, niŝ w pikselach, poniewaŝ nie wiadomo, z jakiej szerokości okna korzysta uŝytkownik. Ustawienie szerokości w procentach umoŝliwia dopasowanie tabeli do okna o dowolnej szerokości. Jeśli poda się szerokość w pikselach, naleŝy liczyć się takŝe i z taką moŝliwością, Ŝe tabela ucieknie poza ekran.

12 Zmiana obramowań tabeli Najczęściej uŝywanym atrybutem znacznika <TABLE> jest atrybut border. Jest on umieszczany 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. 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. Natomiast, aby stworzyć tabelę, której obramowanie nie ma szerokości i jest niewidoczne, naleŝy uŝyć znacznika <TABLE border="0"> ( Uwaga! Takie tabele, bez obramowań, są przydatne przy określaniu struktury strony). Przykład: plik8.html Odstępy między zawartością komórki a jej obramowaniem W języku HTML istnieje atrybut cellpadding znacznika <TABLE> definiujący szerokość odstępu pomiędzy obramowaniem komórki tabeli a jej zawartością, wyraŝony w pikselach. W wielu przeglądarkach wielkość ta domyślnie wynosi 1 piksel. Przykład: plik9.html

13 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. Przykład: Szerokość kolumn plik10.html Atrybut width moŝna zastosować takŝe do poszczególnych komórek (wewnątrz znaczników <TH> lub <TD>), aby za jego pomocą określić szerokość konkretnych kolumn. Podobnie jak w przypadku szerokości tabeli przedstawionej wcześniej, 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.

14 MoŜliwość definiowania szerokości kolumn moŝe być przydatna, w przypadku, gdy wszystkie kolumny tabeli mają mieć identyczną szerokość niezaleŝnie od ich zawartości (moŝliwość ta jest przydatna, na przykład, w niektórych formach układu stron). W poniŝszym przykładzie tabela zajmuje 100% szerokości okna przeglądarki. Pierwsza kolumna tabeli zajmuje 55% jej całkowitej szerokości, a pozostała trzy kolumny po 15%. Aby utworzyć taką tabelę, szerokości kolumn zostają podane jedynie w komórkach pierwszego wiersza tabeli. Kolumny pozostałych wierszy dopasują się do kolumn pierwszego wiersza. Przykład: <table border="1" width="100%"> <caption>wykaz ksiąŝek</caption> <th width="55%">tytuł</th> <td width="15%">"smak Ŝycia"</td> <td width="15%">"pod kasztanem"</td> <td width="15%">"między nami..."</td> plik11.html Gdy zmienimy szerokość całej tabeli do 80% szerokości strony, szerokości poszczególnych kolumn nadal zajmą odpowiednio 55%, 15%, 15% i 15% szerokości tabeli: plik12.html

15 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. Przypomnijmy, Ŝe 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). 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. Dodatkowo naleŝy pamiętać, aby wraz ze zmianą koloru tła komórki zmienić kolor zawartego w niej tekstu, aby komórka była czytelna. MoŜna wtedy uŝyć znacznika <FONT COLOR >. Aby kolor komórki został wyświetlony, musi ona coś zawierać, moŝe to być jedynie znacznik <BR/>.

16 PoniŜej przedstawiono przykład tabeli, w którym zastosowano zmianę koloru poszczególnych komórek: <th bgcolor="#ffcc66">tytuł</th> <th bgcolor="#ffcc66">autor</th> <th bgcolor="#ffcc66">liczba stron</th> <th bgcolor="#ffcc66">format</th> <td bgcolor="#ffffcc">"smak Ŝycia"</td> <td bgcolor="#99ffcc">jan Kowalski</td> <td bgcolor="#ff6666">150</td> <td bgcolor="#33ff99">b5</td> <td bgcolor="#ffffcc">"pod kasztanem"</td> <td bgcolor="#99ffcc">zbigniew Nowak</td> <td bgcolor="#ff6666">280</td> <td bgcolor="#33ff99">a5</td> <td bgcolor="#ffffcc">"między nami..."</td> <td bgcolor="#99ffcc">emilia Mak</td> <td bgcolor="#ff6666">60</td> <td bgcolor="#33ff99">a4</td> </table> Przykład: plik13.html

17 Zmiana koloru obramowań tabeli Przeglądarka Internet Explorer dostarcza takŝe atrybutów, które umoŝliwiają zmianę kolorów obramowań elementów tabeli. Atrybuty te to: 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. 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, np.: <table border="7" bordercolorlight="#33ccff" bordercolordark="#330066"> Przykład: plik14.html

18 Umieszczanie obrazów w komórkach tabel W tabelach moŝna umieszczać dowolny kod HTML, w tym równieŝ obrazy, co sprawia, Ŝe wygląd strony staje się bardziej atrakcyjny (wciąŝ jednak trzeba myśleć o celowości i wielkości obrazów), a zarazem uŝycie tabeli pozwoli dodatkowo na kontrolę równomiernego rozmieszczenia obrazów na stronie np.: tworząc tzw. galerie. W celu umieszczenia obrazu wewnątrz komórki tabeli naleŝy uŝyć pomiędzy znacznikami <TD>...</TD> następującego kodu HTML z uŝyciem znacznika <IMG src= obraz >, z wszelkimi dostępnymi atrybutami odnoszącymi się tego znacznika: <TD><IMG src= obraz ></TD> Oto przykład strony z utworzoną przykładową galerią, z zastosowaniem jeszcze widocznej tabeli: plik15.html Przykład strony z tą samą galerią, ale z wyłączonym obramowaniem tabeli (border= 0 ): plik16.html Tabela w obu przypadkach posłuŝyła do kontroli rozmieszczenia obrazów wewnątrz tejŝe tabeli, jak równieŝ do równomiernego rozmieszczenia obrazów na stronie (przy wyłączonej ramce tabeli). Komórki tabeli automatycznie dopasowały się do rozmiarów, wcześniej przygotowanych obrazków-miniaturek.

19 Określanie wyrównania zawartości tabel W poprzednim przykładzie mieliśmy do czynienia z równomiernym usadowieniem obrazów wewnątrz tabeli, które moŝliwe było dzięki wcześniejszemu przygotowaniu obrazków o tych samych rozmiarach. W przypadku umieszczania tekstów, obrazów, itd., o róŝnych rozmiarach naleŝy zastosować metodę poprawienia wyglądu tabeli poprzez zmodyfikowanie sposobu wyrównania jej zawartości. SłuŜą do tego dwa atrybuty: align - określa wyrównanie zawartości tabeli w poziomie, valign - określa wyrównanie zawartości tabeli w pionie. W większości przeglądarek dostępne są następujące wartości znacznika align oraz valign: top - umieszcza zawartość u góry komórki (valign), middle środkuje w pionie zawartość komórki (valign), bottom - umieszcza zawartość u dołu komórki (valign), left - umieszcza zawartość z lewej strony (align), right - umieszcza zawartość z prawej strony (align), center centruje zawartość komórki (align).

20 PoniŜej przedstawiono dwa przykłady uŝycia atrybutów align oraz valign w przypadku umieszczenia tekstu i obrazu wewnątrz komórek tabeli: Przykład z tekstem :... <th>do dołu</th> <td align="left" valign="bottom"> <font color="red"><b>logo</b></font></td> <td align="center" valign="bottom"> <font color="red"><b>logo</b></font></td> <td align="right" valign="bottom"> <font color="red"><b>logo</b></font></td>... plik17.html Przykład z obrazkiem :... <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>... plik18.html

21 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 marginesu 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 tabelą. Ustawienie align="right" działa podobnie, z tym, Ŝe tabela jest wyrównywana do prawego marginesu. W poniŝszym przykładzie tabela o szerokości wynoszącej 80% całkowitej szerokości strony, została wyrównana do prawego brzegu strony. Oto postać znacznika <TABLE> definiującego tę tabelę: <TABLE border="1" align="right" width="80%">... </TABLE> <P><font face="arial"><br> Tradycje polskiej <B>Biblioteki Narodowej</B> sięgają początków wieku osiemnastego i wiąŝą się z postaciami i dziełem Andrzeja Stanisława i Józefa Andrzeja Załuskich... plik19.html

22 Komórki rozpięte na kilku wierszach lub kolumnach W dotychczas przypadkach utworzonych tabel, 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. PoniŜszy przykład pokazuje tabelę zawierającą komórki rozpięte na kilku wierszach i (lub) kolumnach. Komórka zawierająca dwa wiersze i dwie kolumny Komórka zawierająca dwa wiersze Komórka zawierająca dwie kolumny Przyglądnijmy się jak wygląda kod HTML dla takiej tabelki: plik20.html

23 <table border="1"> <caption> <b>mnoŝenie zmiennych A,B,C,D</b> </caption> <th colspan="2" rowspan="2">mnoŝenie</th> <th colspan="2">zmienne A i B</th> <th>a=1</th> <th>b=2</th> <tr align="center"> <th rowspan="2">zmienne C i D</td> <th>c=3</th> <td>3</td> <td>6</td> <tr align="center"> <th>d=4</th> <td>4</td> <td>8</td> </table> I cały kod dla tego dokumentu (patrz źródło): plik20.html

24 Aby utworzyć 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. Przeanalizujmy uŝycie tych atrybutów na dwóch prostych przykładach. Pierwszy z nich będzie dotyczył przypadku, w którym komórka zostanie rozpięta nad dwiema kolumnami (uŝycie atrybutu colspan): <table border="1" width="300"> <caption><b>wykaz ksiąŝek</b></caption> <th colspan="2">tytuł oraz autor</th> <tr align="center"> <td>"smak Ŝycia"</td> <td>jan Kowalski</td> <tr align="center"> <td>"pod kasztanem"</td> <td>zbigniew Nowak</td> <tr align="center"> <td>"między nami..."</td> <td>emilia Mak</td> </table> plik21.html

25 Drugi z przykładów dotyczy przypadku, w którym komórka zostanie rozpięta na dwa wiersze (uŝycie atrybutu rowspan): <table border="1" width="500"> <caption><b>wykaz ksiąŝek</b></caption> <th rowspan="2">tytuł oraz autor</th> <td align="center">"smak Ŝycia"</td> <td align="center">"pod kasztanem"</td> <td align="center">"między nami..."</td> <td align="center">jan Kowalski</td> <td align="center">zbigniew Nowak</td> <td align="center">emilia Mak</td> </table> plik22.html Uwagi praktyczne! 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.

26 Zgodnie z przytoczonymi uwagami moŝna teraz przystąpić do utworzenia pewnej tabeli zawierającą informacje serwisowe z instrukcji obsługi samochodu. Wygląd tabeli będzie zawierać nagłówki i zwykłe komórkami, do których zastosowano wyrównanie i wprowadzono komórki rozpięte na wierszach i komórkach. Tabela taka jest juŝ nieco bardziej skomplikowana, stąd proces jej tworzenia staje się pracochłonny. PoniŜej przedstawiono prezentację takiej tabeli: Jak widać z powyŝszego rysunku w tabeli utworzono wiele rozpiętych komórek, wyświetlenie obramowań pomaga zobaczyć konstrukcję rozpięć. Tabela posiada 5 wierszy oraz 5 kolumn. NaleŜy pamiętać, Ŝe punktem wyjścia przy tworzeniu tej tabeli jest górna, lewa komórka. plik23.html

27 Oto pełny kod dla tabeli: <table border="5" bordercolorlight="#33ccff" bordercolordark="#330066" cellspacing="0" cellpadding="5"> <caption align="center"><b>odchylenie pasa napędowego</b></caption> <th rowspan="2" colspan="2"><br></th> <th colspan="2">odchylenie uŝywanego pasa</th> <th rowspan="2">ustawienia odchylenia<br>nowego pasa</th> <th>limit</th> <th>dopasowanie<br>odchylenia</th> <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 align="center"> <td align="left">modele z AC</td> <td>12 mm</td> <td>6-8 mm</td> <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> </table>

28 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 - określa liczbę kolumn w grupie. 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 - określa szerokość (liczba pikseli, wielkość procentowa lub wartość względna) kaŝdej kolumny naleŝącej do danej grupy. Określając szerokość, moŝna takŝe uŝyć specjalnego symbolu "0*". Oznacza on, Ŝe szerokością kaŝdej kolumny grupy powinna być minimalna szerokość konieczna do wyświetlenia zawartości kaŝdej komórki kolumny.

29 W przypadku np. tabeli o szerokości 300 pikseli, składającej się z sześciu kolumn, z których kaŝda z miałaby szerokość 50 pikseli, powinno się uŝyć następującego kodu: <TABLE border="1" width="300"> <COLGROUP span="6" width="50"> </COLGROUP> Gdyby zmienić układ kolumn tej samej w taki sposób, aby pierwsze dwie kolumny miały szerokość 30 pikseli, a pozostałe 4 po 60 pikseli, wymagałoby to uŝycia dwóch znaczników <COLGROUP>: <TABLE border="1" width="300"> <COLGROUP span="2" width="30"> </COLGROUP> <COLGROUP span="4" width="60"> </COLGROUP> A gdyby nie wymagać, by wszystkie kolumny naleŝące do grupy miały tę samą szerokość lub taki sam wygląd? Do tego właśnie słuŝy znacznik <COL>. Znacznik <COLGROUP> słuŝy do definiowania struktury kolumn tabeli, natomiast <COL>, do określania ich atrybutów. Aby uŝyć tego znacznika naleŝy rozpocząć definicję kolumny właśnie od znacznika <COL>. W tym przypadku nie wolno stosować znacznika zamykającego. Chcąc tym razem, aby obie kolumny pierwszej grupy miały szerokość po 30 pikseli, natomiast kolumny w drugiej grupie miały odpowiednio szerokości: 40, 50, 50 oraz 100 pikseli, naleŝałoby uŝyć następującego kodu, z uŝyciem <COL>:

30 <TABLE border="1" width="300"> <COLGROUP span="2" width="30"> </COLGROUP > <COLGROUP > <COL span="1" width="40"> <COL span="2" width="50"> <COL span="1" width="100"> </COLGROUP> A oto rozbudowany przykład z rozkładem dnia : <TABLE border="1" width="80%" bgcolor="#6699cc"> <CAPTION><B>Rozkład dnia</b></caption> <COLGROUP width="20%" align="center" valign="top"></colgroup> <COLGROUP span="2" width="40%" valign="top"></colgroup> <TR> <TH>Godziny</TH> <TH>Zajęcia</TH> <TH>Uwagi</TH> </TR> <TR> <TD>7:00-8:00</TD> <TD>Pobudka + śniadanie</td> <TD>Nie zapomnij nakarmić kanarka!</td> </TR>... plik24.html

31 Grupowanie i określanie wyrównania wierszy Wiersze moŝna zgrupować w trzech sekcjach: w nagłówku tabeli, w jej stopce oraz w ciele tabeli. Sekcje tabeli: nagłówek, stopka oraz ciało są definiowane przy uŝyciu znaczników <THEAD>, <TFOOT> oraz <TBODY>. KaŜdy z tych znaczników musi zawierać identyczną liczbę kolumn. Element <THEAD> </THEAD> definiuje nagłówek tabeli zawierający informacje o kolumnach umieszczonych w ciele tabeli. Nagłówek tabeli moŝna umieścić bezpośrednio po znaczniku <TABLE> lub po znaczniku <COLGROUP>. Wewnątrz nagłówka naleŝy 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="80%" bgcolor="#6699cc"> <CAPTION><B>Rozkład dnia</b></caption> <COLGROUP width="20%" align="center" valign="top"></colgroup> <COLGROUP span="2" width="40%" valign="top"></colgroup> <THEAD> <TR> <TH>Godziny</TH> <TH>Zajęcia</TH> <TH>Uwagi</TH> </TR> </THEAD>...

32 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. Oto kod stopki przykładowej tabeli: <TFOOT> <TR> <TH>Razem: 15h</TH> <TH>Tak jest codziennie :)</TH> <TH>Znowu się mnie czepiają!</th> </TR> </TFOOT> Znacznika <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.

33 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> <th>godziny</th> <th>zajęcia</th> <th>uwagi</th>... <td>8:00-9:00</td> <td>dojazd do pracy</td> <td>tylko się nie spoźnić!</td> </tbody> <tbody> <td>9:00-13:00</td> <td>cięŝka praca</td> <td>zadbaj o wraŝenie!</td>... <td>20:00-22:00</td> <td>powrót + kolacja</td> <td>uff! Tylko nie wylądować na OIOMie!</td> <tbody>

34 Po połączeniu wszystkich sekcji tabeli w jedną całość, otrzymamy tabelę przedstawioną w przykładzie: plik25.html Atrybuty FRAME oraz RULES Prostym sposobem określenia przynaleŝności poszczególnych komórek do poszczególnych grup kolumn i wierszy jest wykorzystanie atrybutów frame oraz rules znacznika <TABLE>. Atrybut frame określa wygląd zewnętrznego obramowania tabeli. Dostępnych jest kilka specjalnych wartości: void - Ŝadna krawędź zewnętrznego obramowania tabeli nie jest widoczna (domyślna), 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.

35 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. Wartości tego atrybutu to: none - wewnątrz tabeli nie będą wyświetlane Ŝadne linie (domyślna), 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. Przykład <TABLE border="1" width="80%" frame= hsides" rules="groups"> plik26.html

36 Treść wykładu została sporządzona na podstawie: Lemay L., HTML 4, Wyd. HELION, W-wa oraz wydanie poprawione