1. Tabela, wiersze i kolumny

Opis tabeli znajdować się powinien wewnątrz znaczników <TABLE> </TABLE>. W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.

Wiersz tabeli definiuje się znacznikami <TR> <TR> i jest on wewnętrznym opisem tabeli. On sam tworzy ramy dla komórek wewnątrz których znajdują się dane. W tabeli można umieszczać dowolną ilość wierszy, np.:

W powyższym przykładzie utworzona została tabela zawierająca 3 wiersze. W następnym kroku należy w każdym z wierszy zdefiniować komórki.

Komórkę w wierszu definiuje się znacznikami <TD> <TD>. Każda komórka powinna zawierać dane, np. w postaci tekstu lub grafiki. Komórki umieszcza się między znacznikami wybranego wiersza tabeli, np.:

co przyjmie następujący wygląd:

2. Obramowanie, margines, szerokość oraz wysokość tabeli i komórek

W celu dodania do tabeli obramowania należy wykorzystać do tego atrybut BORDER w znaczniku TABLE. W przypadku braku wartości obramowania tabeli, brana jest jej wartość domyślna, tj. 0. Składnia wygląda następująco:

Oto przykład tabeli, której obramowanie jest równe 5:

<TABLE BORDER=5>

przyjmie następujący wygląd:

W celu odsunięcia od siebie poszczególnych komórek w tabeli należy posłużyć się atrybutem CELLSPACING. Przykład:

<TABLE BORDER=5 CELLSPACING=10>

i przyjmie postać:

Jeśli okaże się, że odstęp między krawędzią komórki a jej zawartością jest zbyt mała to można posłużyć się atrybutem CELLPADDING. Składnia:

Przykład:

<TABLE BORDER=5 CELLPADDING=20>

przyjmie wygląd: 

Jeśli zaistniałaby konieczność zmiany szerokości tabeli, należałoby posłużyć się atrybutem WIDTH. Składnia wyglądać powinna następująco:

gdzie x może przyjąć wartość numeryczną lub procentową w odniesieniu do szerokości ekranu przeglądarki. Przykład:

<TABLE BORDER=5 WIDTH=50%>

Ten sam atrybut może posłużyć do określenia szerokości komórki (kolumny) w tabeli. Wartość może być w postaci numerycznej lub procentowej w odniesieniu do szerokości tabeli. Składnia wygląda następująco:

Przykład:

<TD WIDTH=150>

wygląda następująco:

W celu określenia wysokości tabeli należy użyć atrybutu HEIGHT, a jego wartość wyrazić w pikselach lub procentach widocznej strony. Konstrukcja ma postać:

Przykład:

<TABLE BORDER=5 HEIGHT=200>

3. Pozycjonowanie tabel oraz danych w komórkach

W celu wyrównania tabeli w stosunku do marginesów strony lub otaczających ją elementów (tekst, grafika) można posłużyć się atrybutem ALIGN w znaczniku TABLE. Może on przyjąć wartości LEFT, RIGHT lub CENTER. Przykład:

wygląda następująco:

Atrybut ALIGN można także wykorzystać do poziomego wyrównania zawartości komórki. W tym celu należy użyć konstrukcji:

Przykłady, gdzie atrybuty tabeli wyglądają następująco <TABLE BORDER=5 WIDTH=50%>:

W celu wyrównania pionowego zawartości komórki należy posłużyć się atrybutem VALIGN. Może on przyjąć wartości TOP, MIDDLE oraz BOTTOM. Składnia wygląda następująco:

Przykłady, gdzie atrybuty tabeli wyglądają następująco <TABLE BORDER=5 HEIGHT=200>:

4. Wypełnienie tabeli (tło)

Przeglądarka Internet Explorer pozwala wypełnić tabelę dowolnym kolorem - kolorem tła tabeli. W tym celu należy w definicji tabeli wykorzystać atrybut BGCOLOR. Składnia jest następująca:

gdzie kolor może przyjąć postać wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua).

Przykład:

<TABLE BORDER=5 BGCOLOR=RED> 

Istnieje również możliwość zmiany kolorów tła poszczególnych komórek tabeli. Składnia jest następująca:

gdzie kolor może przyjąć postać wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua).

Przykład: 

Jako tła tabeli lub poszczególnych komórek można także użyć gotowego obrazka. W tym celu należy użyć składni:

Przykład:

<TABLE BACKGROUND="marble.jpg">

tworzy tabelę jak poniżej:

Przeglądarka Internet Explorer interpretuje także kolor obramowania tabeli. W tym celu należy użyć atrybutu BORDERCOLOR. Składnia:

gdzie kolor może przyjąć postać wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua).

Przykład:

<TABLE BORDER=5  BORDERCOLOR=GREEN>

Oprócz tego Internet Explorer pozwala określić kolor cienia obramowania tabeli. Cień brzegu komórki lub tabeli dzieli się na dwie części: jasną z lewej i u góry oraz ciemną z prawej i u dołu. Można nadać odrębną barwę obu cieniom, np.:

<TABLE BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white>

i wyglądać to będzie następująco:

Przykład w przypadku komórki:

<TR BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Tabela może zawierać tytuł, wyjaśniający jej treść. Należy umieścić go zaraz za ogólną definicją tabeli (za znacznikiem <TABLE>), np.:

<TABLE BORDER>
<CAPTION ALIGN=TOP>Napis na górze</CAPTION>

będzie wyglądać:

Autor: Krzysztof Stelmach
Strona pochodzi z http://www.stelmach.info/