Tabele mogą się wydawać trudne szczególnie, jeśli chcemy ich używać do określenia układu stron. Jednak starannie zaplanowany układ strony ułatwi nam ten element. Określenie szerokości tabeli spowoduje, że będzie ona stała, a przeglądarka nie będzie jej określać na swój sposób, umożliwi to wyświetlenie elementów tak jak zostały zaplanowane.

Tabela składa się z wierszy i komórek. Ilość komórek w każdym z wierszy określa kształt tabeli. Tabelę tworzymy za pomocą znaczników <TABLE></TABLE>. Bez nich tabela nie zostanie wyświetlona. W ramach tego znacznika są umieszczane wszystkie elementy. Nie deklaruje on ilości wierszy i komórek w wierszu.

Wiersz tabeli określany jest przez znacznik: <TR></TR>. Wiersz tabeli tworzy ramy dla komórek z danymi. W ramach <TABLE></TABLE> można umieścić wiele kolejnych definicji wierszy <TR></TR>.

Przykład:

czyli:

Za definiowanie komórek w tabeli odpowiada znacznik: <TD></TD>. Komórka zawiera konkretne dane, jak tekst i grafika. Konkretne komórki są umieszczane między znacznikami wybranego rzędu.

Przykład:

czyli:

Jak widać, tabela zawiera 4 rzędy, w każdym po 3 komórek, zaś w konkretnych komórkach zostały umieszczone cyfry: od 1 do 4. Jest to najprostszy przykład tabeli.

UWAGI:
• Istnieje znacznik <TH> służący do definiowania komórek nagłówkowych. Powoduje on wyśrodkowanie zawartości komórki i wyświetlenie jej pogrubioną czcionką.
• Tytuł tabeli można umieścić pomiędzy otwierającym i zamykającym znacznikiem <CAPTION>.

Krawędzie pomagają odróżnić tabele od reszty strony. Aby tabela zawierała obramowanie, wystarczy rozszerzyć definicję o atrybut BORDER. Jeśli nie podamy szerokości krawędzi, przyjmowana jest jej domyślna wartość równa 2 piksele.

<TABLE BORDER=n>, gdzie n jest szerokością ramki tabeli wyrażoną w pikselach.

Przykład:

<TABLE Border=3>

krawędź równa 3 piksele

<TABLE Border=10>

krawędź równa 10 pikseli

Zazwyczaj kolor krawędzi tabeli zależny jest od koloru tła,  jednak przeglądarka firmy Microsoft ma kilka rozszerzeń pozwalających na określenie koloru krawędzi (włącznie z cieniowaniem). Aby krawędzie miały jeden kolor należy wpisać:

<TABLE BORDER=n BORDERCOLOR="kolor">, gdzie kolor określa kolor krawędzi; można wpisać nazwę koloru np. blue (niebieski), red (czerwony) czy green (zielony) lub jej szesnastkową wartość w postaci #rrggbb np. #0000CC jako niebieski.

Przykład:

<TABLE BORDERCOLORDARK="kolor"> - pozwala zacieniować fragmenty krawędzi (górnych i lewych krawędzi komórek oraz dolnych prawych krawędzi samej tabeli).

Przykład:

<TABLE Border=10 BORDERCOLORDARK="green">

<TABLE BORDERCOLORLIGHT="kolor"> - pozwala wyświetlić oświetlone fragmenty krawędzi (dolnych i prawych krawędzi komórek oraz górnej i lewej krawędzi).

Przykład:

<TABLE Border=10 BORDERCOLORLIGHT="yellow">

Przeglądarka automatycznie określi szerokość tabeli poprzez obliczenia szerokości jej zawartości. Mimo to, doda ona do obliczonej wartości kilka pikseli. Aby wykluczyć taką ewentualność należy dokładnie określić szerokość poszczególnych komórek oraz całej tabeli. Atrybut WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli.

WIDTH=n, gdzie n jest szerokością komórki lub tabeli wyrażoną w pikselach( można stosować w znacznikach TABLE lub TD)

Przykład:

<TABLE BORDER WIDTH=120>

<TABLE BORDER WIDTH=400>

UWAGI:

• Szerokość komórki lub tabeli można także określić jako wartość procentową: odpowiednio szerokość całej tabeli lub szerokość okna przeglądarki. W takim przypadku zmiana szerokości okna przeglądarki spowoduje zmianę szerokości tabeli.

Otaczanie tabeli tekstem

Tabelę można otoczyć tekstem w podobnie jak w przypadku ilustracji. Tekst napisany pod tabelą, a przed znacznikiem zamykającym, otoczy tabelę.

<TABLE ALIGN=left> - tabela zostanie wyrównana do lewej krawędzi okna przeglądarki, a tekst otoczy ją z prawej

<BR CLEAR=left> - aby przerwać wyświetlanie tekstu wokół tabeli i wznowić, gdy nie będzie już tabel wyrównanych do lewego marginesu

<TABLE ALIGN=right> - tabela zostanie wyrównana do prawej krawędzi okna przeglądarki, a tekst otoczy ją z lewej

<BR CLEAR=right> - aby przerwać wyświetlanie tekstu wokół tabeli i wznowić, gdy nie będzie już tabel wyrównanych do prawego marginesu

<BR CLEAR=all> - aby przerwać wyświetlanie tekstu wokół tabeli i wznowić, gdy nie będzie już tabel wyrównanych do obu marginesów

Jeśli tabela otoczona jest przez inne elementy strony, to można ją odseparować dodając wokół niej wolną przestrzeń.

<TABLE HSPACE=x>, gdzie x to szerokość wolnego obszaru wyrażona w pikselach; stosujemy, gdy chcemy dodać wolną przestrzeń z prawej i lewej strony tabeli.

<TABLE VSPACE=y>, gdzie y to wysokość wolnego miejsca wyrażona w pikselach; stosujemy, gdy chcemy dodać wolną przestrzeń u góry i u dołu tabeli.

Można połączyć wszystkie komórki w jednym wierszu i wyświetlić w nim nagłówek. Znacznik definiujący komórkę, która ma mieć szerokość kilku kolumn musi zawierać:

<TD COLSPAN=n>, gdzie n określa na ile komórka ma być szeroka.

Przykład:

Jeśli zdefiniowano komórkę szeroką na 2 kolumny, to w tym wierszu należy zdefiniować o jedną komórkę mniej niż w pozostałych, jeśli komórka jest szeroka na 3 kolumny, to w wierszu jest o dwie komórki mnie itd.

Łączenie komórek zajmujących kilka sąsiadujących wierszy odbywa się podobnie jak przy łączeniu komórek w kolumnach:

Przykład:

Domyślnie zawartość komórek jest wyrównywana na dwa sposoby: w poziomie do lewej oraz w pionie do środka komórki. Aby samemu wyrównać zawartość komórki należy posłużyć się atrybutami: ALIGN oraz VALIGN

<TD ALIGN=kierunek>, gdzie kierunek to left(do lewej), center(na środek), right(do prawej)

czyli:

<TD VALIGN=kierunek>, gdzie kierunek może przyjąć wartości: top(góra), middle(środek), bottom(dół) lub baseline(linia bazowa)

UWAGI:

• Wartość baseline wyrównuje zawartość komórki do linii bazowej pierwszej linii tekstu tej komórki. Jedynie Netscape umożliwia stosowanie tej wartości.

Jest możliwe określania odstępów pomiędzy komórkami (ang. cell spacing), co zwiększa tabelę przy jednoczesnym zachowaniu wielkości jej komórek. Rozszerzenie komórek (ang. cell padding) dodaje pusty obszar wokół zawartości komórki, odsuwając jej krawędzie na zewnątrz.

Określanie wielkości odstępów pomiędzy komórkami oraz przestrzeni wewnątrz nich:

<TABLE CELLSPACING=n>, gdzie n jest szerokością pomiędzy komórkami tabeli, wyrażoną w pikselach

<TABLE CELLSPACING=10 BORDER>

<TABLE CELLPADDING=n>, gdzie n jest szerokością obszaru pomiędzy zawartością komórki a jej krawędziami, wyrażoną w pikselach.

<TABLE CELLPADDING=20 BORDER>

 

UWAGI:

• By pozbyć się obszaru pomiędzy komórkami a tabelą należy wpisać CELLSPACING=0 CELLPADDING=0.
• Domyślna wartość odstępu pomiędzy komórkami to 2 piksele, a pomiędzy zawartością i krawędziami - 1 piksel.
• Przy wyrównaniu zawartości komórek, obszar wokół niej jest traktowany jako krawędzie komórki.

Można dowolnie zmieniać kolor tła jednej lub kilku komórek. Służy do tego atrybut BGCOLOR w znaczniku TH lub TD.

<TD BGCOLOR="kolor">, gdzie "kolor" określa kolor komórki.

Przykład:

UWAGI:
• Atrybut BGCOLOR wpisany w komórce TD lub TH ma pierwszeństwo przed kolorem wybranym dla całej tabeli.

Aby wykorzystać ilustrację jako tło tabeli w znaczniku TD lub TH należy użyć atrybutu BACKGROUND.

<TD BACKGROUND="obrazek.gif">, gdzie obrazek.gif to adres URL ilustracji, która ma być tłem komórki.

Przykład:

Aby wykorzystać ilustrację jako tło całej tabeli należy dodać atrybut BACKGROUND  w znaczniku TABLE.

<TABLE BACKGROUND="obrazek.gif">, gdzie obrazek.gif jest adresem URL ilustracji, która ma być tłem tabeli.

Przykład:

UWAGI:
• Jeśli określamy ilustrację tła dla całej tabeli, to IE użyje jednej ilustracji jako tła całej tabeli, natomiast Netscape wyświetli w każdej komórce osobną kopię obrazka.

Tabelę możemy podzielić na poziome sekcje, które będą miały jeden lub kilka wierszy, a następnie formatować całe sekcje za jednym razem i rysować linie podziału tylko między sekcjami, a nie wszystkimi wierszami. Przed pierwszym znacznikiem <TR> definiującym nagłówek, zasadniczą część tabeli lub stopkę należy wpisać <THEAD>, <TBODY> lub <TFOOT>.

Przykład:

UWAGI:
• Netscape nie rozpoznaje znaczników poziomych sekcji

• Można dowolnie formatować pojedyncze poziome grupy komórek znacznikami odnoszącymi się do pojedynczych komórek. IE nie rozpoznaje atrybutów HEIGHT i WEIGHT.

• Teoretycznie każda tabela wymaga, co najmniej jednej sekcji TBODY. Sekcji THEAD i TFOOT można stworzyć tylko po jednej.

Tabele można także podzielić na grupy kolumn dwóch rodzajów - strukturalne i niestrukturalne. Te pierwsze określają, gdzie będą rysowane linie podziału. Niestrukturalne grupy kolumn nie pozwalają na rysowanie linii podziału, lecz dają możliwości określania sposobu formatowania całych kolumn.

Jeśli grupa kolumn będzie liczyć więcej niż jedną kolumnę w ramach znaczników <TABLE> </TABLE> należy dodać następujący znacznik:

<COLGROUP SPAN=n>, gdzie n jest liczbą kolumn w grupie.

Przykład:

W ramach znaczników <TABLE></TABLE> należy wpisać:

<COL SPAN=n>, gdzie n jest liczbą kolumn w grupie.

Przykład:

UWAGI:
• Oba rodzaje podziału na grupy kolumn są ignorowane przez Netscape.

• Grupę COLGROUP można podzielić na grupy COL, by dołączyć niestandardowe informacje do dowolnej kolumny w strukturalnej grupie kolumn. Znaczniki COL unieważniają atrybuty znacznika COLGROUP.

• Wyrównanie zdefiniowane dla grupy kolumn nie dotyczy komórek nagłówkowych <TH>.

Można określić, które zewnętrzne krawędzie tabeli powinny posiadać ramkę, jak również które wewnętrzne ramki powinny się pojawić. Aby określić, które zewnętrzne krawędzie powinny być wyświetlone należy wewnątrz znacznika TABLE, po atrybucie BORDER, użyć atrybutu FRAME.

<TABLE BORDER FRAME=lokalizacja>, gdzie lokalizacja to jedna z podanych poniżej wartości:

• void - bez zewnętrznej linii
  
  

  przykład

  przykład

  
  
• above - linia tylko na górnej krawędzi
  
  

  przykład

  przykład

  
  
• hsides - linia na górnej i na dolnej krawędzi
  
  

  przykład

  przykład

  
  
• vsides - linia na lewej i na prawej krawędzi
  
  

  przykład

  przykład

  
  
• rhs - linia tylko na prawej krawędzi
  
  

  przykład

  przykład

  
  
• lhs - linia tylko na lewej krawędzi
  
  

  przykład

  przykład

  
  
• box lub border - linia na wszystkich krawędziach (wartość domyślna)
  
  

  przykład

  przykład

  
  

<TABLE BORDER RULES=obszar>, gdzie obszar to jedna z podanych poniżej wartości:

• none - bez wewnętrznych ramek
  
  

  przykład

  przykład

  
  
• rows - poziome ramki pomiędzy wszystkimi wierszami
  
  

  przykład

  przykład

  
  
• cols - pionowe ramki pomiędzy wszystkimi kolumnami
  
  

  przykład

  przykład

  
  
• groups - pionowe ramki pomiędzy grupami kolumn
  
  

  przykład

  przykład

  
  
• all - wewnętrzne ramki pomiędzy wszystkimi wierszami i kolumnami
  
  

  przykład

  przykład

  
  

UWAGI:
• Atrybut BORDER musi zostać użyty, aby zadziałały atrybuty FRAME oraz RULES.

Tekst w komórkach dzielony jest na podstawie wysokości i szerokości kolumny. Do wypisania całej zawartości w jednej linii należy użyć atrybutu NOWRAP w znaczniku TD lub TH.

Przykład:

UWAGI:
• Przeglądarki wyświetlą komórkę (oraz tabelę, w której jest ona umieszczona) o szerokości koniecznej do wyświetlania pojedynczej linii tekstu.
• Atrybut NOWRAP unieważnia atrybut WIDTH tabeli.