Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem do zaimplementowania projektowanego układu strony i zdefiniowania położenia elementów według zamysłu autora. Definiując tabelę można podawać wymiary poszczególnych kolumn, a także szerokość i wysokość całej tabeli. Można także wymiarowanie pominąć co spowoduje, że wielkości tabeli i jej komórek zostaną automatycznie dopasowane do elementów w nich zawartych. Tabele są złożone z wierszy. W ramach kolejnych wierszy definiowane są komórki, które defacto tworzą kolumny. Tabela objęta jest parą znaczników: <TABLE>... </TABLE>, natomiast każdy wiersz jest zamknięty w znaczniku... (table row). Wewnątrz bloku... następuje definicja kolejnych komórek wiersza poprzez wprowadzenie znacznika: <TD>... </TD> (table data cell). Pomiędzy otwarciem i zamknięciem znacznika <TD> umieszczana jest zawartość komórki. Zawartością komórki może wszystko to, co możemy używać w jakichkolwiek innych miejscach strony WWW, tak więc zarówno zwykły i formatowany tekst, znaczniki wstawiające grafikę i inne obiekty, elementy formularza, a także zagnieżdżone inne tabele. Przy tworzeniu kodu tabeli, warto stosować odpowiednie wcięcia, aby łatwo można było zorientować się na temat jej struktury. Przykład 15a.htm przedstawia kod strony zawierającej prostą tabelę cennik. Z uwagi na to że domyślnie w tabelach nie są wyświetlane obramowania komórek, należało zdefiniować parametr BORDER dla znacznika TABLE. W tabeli nie zdefiniowano żadnych innych cech, więc przyjęła ona wielkość dopasowaną do swojej zawartości. Elementy w komórkach przyjęły standardowe wyrównanie, w tym przypadku do lewej. Przykład 15a.htm <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TD><B>Typ</B></TD><TD><B>Cena</B></TD><TD>Uwagi</TD> <TD>Standard</TD><TD>400</TD><TD> </TD> <TD>Professional</TD><TD>2400</TD><TD> </TD>
<TD>Enterprise</TD><TD>8700</TD><TD>termin oczekiwania: 14 dni</td> </TABLE> </BODY></HTML> Często do tworzenia komórek w pierwszym wierszu tabeli przedstawiającej zestawienie, zamiast znacznika <TD> umieszcza się <TH> (table header). Ich zawartość zostaje w takim przypadku domyślnie wyróżniona przez przeglądarkę (np. wyśrodkowaniem i pogrubieniem tekstu). Demonstruje to przykład 15b.htm, w którym także zdefiniowano m.in. szerokość tabeli, marginesy wewnątrz komórek, kolor tła całej tabeli, a także zmieniono wyrównanie dla całego drugiego wiersza komórek, a także z osobna w każdej z komórek wiersza trzeciego. Przykład 15b.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY> <DIV ALIGN="right"> <TABLE BORDER="1" BGCOLOR="gray" CELLPADDING="10" CELLSPACING="1" WIDTH="300"> <TH>Typ</TH> <TH>Cena</TH>
<TR ALIGN="center"> <TD>Standard</TD> <TD>400</TD> <TD ALIGN="center">Professional</TD> <TD ALIGN="center">2400</TD> <TD>Enterprise</TD> <TD>8700</TD> </TABLE> </DIV> </BODY></HTML> Wyrównanie elementów w tabeli można definiować zarówno dla całego wiersza przy znaczniku, jak i dla poszczególnych komórek przy znacznikach <TD>. Można definiować wyrównanie z poziomie (atrybut ALIGN), jak i wyrównanie w pionie (atrybut
VALIGN). Dla wyrównania całej tabeli, najlepiej objąć ją znacznikiem <DIV> z parametrem ALIGN. Można także dla znacznika <TABLE>, wykorzystać atrybut ALIGN, wtedy jednak tabela będzie oblewana tekstem (jeśli oczywiście starczy miejsca w oknie), podobnie jak można było oblewać tekstem rysunki. Przykład zastosowania różnych rodzajów wyrównania zastosowano w przykładzie 15b.htm. Znacznik TABLE Opis Wstawienie tabeli. Najważniejsze parametry: WIDTH szerokość tabeli podawana w pikselach (np. WIDTH=300), lub w procentach szerokości okna (np. WIDTH=70%). Jeśli zostanie pominięta, jest ustalana na podstawie wielkości elementów w komórkach. BORDER zdefiniowanie grubości ramki wokół tabeli. W przypadku dodatniej wartości wyświetlane są także ramki wokół komórek. W przypadku braku definicji atrybutu obramowania tabeli nie będą wyświetlane. CELLSPACING odstępy pomiędzy komórkami (w pikselach). CELLPADDING marginesy pomiędzy zawartością komórek a jej obramowaniem. W przypadku gdy atrybut WIDTH nie jest zdefiniowany, zwiększanie wartości CELLPADDING spowoduje powiększanie się obszaru strony zajmowanego przez tabelę. ALIGN ustawienie wyrównania tabel na stronie do lewej (LEFT) lub prawej (RIGHT). Zastosowanie parametru ALIGN automatycznie spowoduje że tabela będzie oblewana tekstem po niej następującym. BGCOLOR kolor tła tabeli. BACKGROUND adres pliku graficznego określający tło tabeli. Nie jest to atrybut standardowy, a jedynie rozszerzenie niektórych przeglądarek. Zaleca się zamiast niego użycie stylów CSS, celem uzyskania takiej samej funkcjonalności. przykłady: <TABLE> <TABLE BORDER="2"> <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0"> <TABLE BORDER="1" BGCOLOR="#FF0000" WIDTH="100%"> <TABLE WIDTH="350" ALIGN="RIGHT" BACKGROUND="gr/tab.gif"> Znacznik <TABLE> należy koniecznie zamknąć po zakończeniu tabeli.
TR Rozpoczęcie nowego wiersza w tabeli. Podstawowe parametry: ALIGN wyrównanie poziome zawartości komórek w definiowanym wierszu. Atrybut może przyjmować wartości: LEFT,RIGHT,CENTER,JUSTIFY a także CHAR/ VALIGN wyrównanie pionowe zawartości komórek w definiowanym wierszu. Stosowane wartości: top, middle, bottom, baseline. HEIGHT wysokość komórek podawana w pikselach, lub w procentach wysokości tabeli. BGCOLOR kolor tła wiersza. BACKGROUND adres pliku graficznego określający tło wiersza. Podobnie jak przy poprzednim znaczniku jest to nie ujęte w standardzie rozszerzenie przeglądarek. Zaleca się zamiast niego użycie stylów CSS. Przykład: <TR BGCOLOR="#99CCFF" VALIGN="top" ALIGN="center"> <TD> 1 </TD><TD> 2 </TD> TD Zdefiniowanie komórki w wierszu. Podstawowe parametry: ALIGN wyrównanie poziome zawartości komórki.atrybut może przyjmować wartości: LEFT,RIGHT,CENTER,JUSTIFY, a także CHAR. VALIGN wyrównanie pionowe zawartości komórki. Stosowane wartości: top, middle, bottom, baseline. BGCOLOR kolor tła komórki. BACKGROUND adres pliku graficznego określający tło komórki. Podobnie jak przy poprzednich znacznikach jest to nie ujęte w standardzie rozszerzenie przeglądarek. Zaleca się zamiast niego użycie stylów CSS. WIDTH szerokość komórki podawana w pikselach, lub w procentach szerokości tabeli. Jeśli jest ona definiowana to powinna być taka sama we wszystkich komórkach w kolumnie tabeli. HEIGHT wysokość komórki podawana w pikselach, lub w procentach wysokości tabeli. Jeśli jest ona definiowana to powinna być taka sama we
wszystkich komórkach w tym samym wierszu tabeli. COLSPAN umożliwia zdefiniowanie komórki rozciągniętej na określoną liczbę kolumn. Wartość atrybutu definiuje tę liczbę kolumn. ROWSPAN umożliwia zdefiniowanie komórki rozciągniętej na określoną liczbę wierszy. Wartość atrybutu definiuje tę liczbę wierszy. Proste zastosowanie łączenia kolumn i wierszy przedstawia przykład 15c.htm. Przykład: <TD BGCOLOR="#99CCFF" VALIGN="top" ALIGN="center"> 1</TD> <TD> <IMG SRC="rysunek.gif"> </TD> Niektóre atrybuty (takie jak np. BGCOLOR, HEIGHT, ALIGN) mogą być definiowane zarówno przy znaczniku jak i <TD>. Jeśli ma to miejsce w tym samym wierszu, to pierwszeństwo mają definicje atrybutów znacznika <TD>. W poniższym przykładzie cały wiersz będzie posiadał czerwone tło oprócz jednej, zielonej komórki: <TR BGCOLOR="red"><TD> 1 </TD><TD> 2 </TD><TD BGCOLOR="green"> 3</TD> TH W praktyce zamknięcie znacznika <TD>, podobnie jak i <TH> można pominąć i większości przypadków przeglądarki będą nadal poprawnie pokazywały tabelę. Jednak dla zachowania standardu, a także szczególnie w sytuacjach gdy tabele są wzajemnie zagnieżdżane w sobie, warto zamykać te znaczniki. Zdefiniowanie komórki w wierszu, zwykle pełniącej rolę nagłówkową. <TH> może być zastosowany zamiast <TD> i powoduje wtedy wyróżnienie zawartości tekstowej komórki. Można stosować takie same parametry jak w przypadku znacznika <TD>.
Przykład 15c.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY> <TABLE BORDER="1" CELLPADDING="0"> <TD ROWSPAN=5 BGCOLOR="gray" WIDTH="20"> </TD> <TH COLSPAN=2 BGCOLOR="gray">Cennik</TH> <TH>Typ</TH> <TH>Cena</TH> <TR ALIGN="center"> <TD>Standard</TD> <TD>400</TD> <TR ALIGN="center"> <TD>Professional</TD> <TD>2400</TD> <TR ALIGN="center"> <TD>Enterprise</TD> <TD>8700</TD> </TABLE> </BODY></HTML>
Przykład tworzenia tabeli dla uzyskania określonego układu strony Poniżej przedstawiony przykład ma na celu zademonstrowanie użycia prostej tabeli do zaimplementowania określonego układu strony. Celem jest uzyskanie wyglądu strony takiego, jak przedstawiono na rysunku poniżej: Do dyspozycji posiadamy 3 pliki graficzne: academy.jpg, wsiz.jpg oraz logo.jpg. Zasadnicza część strony powinna być w kolorze białym natomiast jej obramowania w kolorze szarym. Efekt taki uzyskamy umieszczając tabelę z białym tłem zawierającą elementy graficzne i tekstowe strony. Podstawowe tło strony będzie określone w kolorze szarym, aby w ten sposób uzyskać zamierzony efekt obramowań. W omawianym przykładzie wystarczy oprzeć się na prostej tabeli zawierającej 2 wiersze i 2 kolumny czyli razem 4 komórki. Podstawowy szablon takiej tabeli możemy zapisać tak jak pokazano w przykładzie 16a.htm:
Przykład 16a.htm <HTML> <HEAD><TITLE>Tabele</TITLE></HEAD> <BODY> <DIV ALIGN="center"> <TABLE BORDER="1"> <TD> tutaj informacje tekstowe </TD> <TD> zdjecie wsiz.jpg </TD> <TD> zdjęcie academy.jpg </TD> <TD> obrazek logo.jpg </TD> </TABLE> </DIV> </BODY></HTML> Powyższa tabela została wyśrodkowana na stronie poprzez wykorzystanie znacznika <DIV>. Kolejnym krokiem będzie umieszczenie w komórkach tabeli obrazów graficznych i właściwych elementów tekstowych, oraz zdefiniowanie kolorów tła strony i tabeli. Przedstawia to przykład 16b.htm. Zastosowano także style CSS (znacznik <STYLE>), które będą omawiane w dalszej części ninejszej publikacji. Przykład 16b.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY BGCOLOR="#999999"> <STYLE>H2,H3 {font-family:verdana}</style> <DIV ALIGN="center"> <TABLE BORDER BGCOLOR="white">
<TD> <H2>Wyższa Szkoła <br>informatyki i Zarządzania</H2> <H3>Bielsko-Biała</H3> </TD> <TD><img src="grafika/wsiz.jpg"></td> <TD><img src="grafika/academy.jpg"></td> <TD><img src="grafika/logo.jpg"></td> </TABLE> </DIV> </BODY></HTML>
Ostatnim wymaganym zabiegiem jest poszerzenie szerokości tabeli do 90% szerokości okna, zdefiniowanie wyrównania poziomego oraz pionowego w komórkach, a także wyłączenie wyświetlania krawędzi(border). Zwiększono także margines wewnątrz komórek (atrybut CELLPADDING) aby zwiększyć odstęp pomiędzy zdjęciami a brzegiem tabeli. Finalny kod przedstawia przykład 16.htm. Przykład 16.htm <HTML><HEAD><TITLE>Tabele</TITLE></HEAD><BODY BGCOLOR="#999999"> <STYLE>H2,H3 {font-family:verdana}</style> <DIV ALIGN="center"> <TABLE WIDTH="90%" BGCOLOR="white" CELLPADDING="10"> <TD ALIGN="center"> </TD> <H2>Wyższa Szkoła <br>informatyki i Zarządzania</H2> <H3>Bielsko-Biała</H3> <TD ALIGN="right"><img src="grafika/wsiz.jpg"></td> <TR VALIGN="bottom"> <TD ALIGN="left"> </TD> <img src="grafika/academy.jpg"> <TD ALIGN="right"><img src="grafika/logo.jpg"></td> </TABLE> </DIV> </BODY></HTML>
Powyższy przykład przedstawia stosunkowo proste rozwiązanie. W praktyce tworząc układ strony serwisu internetowego stosuje się często tabele, które wzajemnie są w sobie zagnieżdżane.