Strona główna
Spis poleceń HTML | Wstęp | Etykieta webmastera | HTML dla bardzo pocz±tkuj±cych | Struktura dokumentu | Czcionki | Elementy blokowe | Odsyłacze | Wykazy | Grafika i multimedia | Tabele | Style | Ramki | Pływaj±ce ramki | Formularze | Znaki specjalne | Kolory | Ankieta
Księga go¶ci | Wprowadzenie do JavaScript | Przydatne skrypty | Response-O-Matic | Liczniki wizyt | Kilka słów o narzędziach | Leksykon webmastera | Wprowadzenie do FrontPage Express | Jak publikować w języku Esperanto? | Tworzenie stron z ActiveX | Tworzenie stron z HTML Help Java Applet | Narzędzia ICQ | Zasoby webmasterskie

# Tabele

Ogólne ramy tabeli | Wiersz tabeli | Komórka w wierszu | Obramowanie tabeli | Obramowanie komórek | Marginesy dla komórek | Szeroko¶ć tabeli | Szeroko¶ć komórki | Wyrównanie tabeli | Poziome wyrównanie danych w komórkach | Wysoko¶ć tabeli | Pionowe wyrównanie danych w komórkach | Kolor tła tabeli | Kolor obramowania tabeli | Odcień obramowania tabeli | Podpis pod tabel± | Nagłówek wiersza i kolumny | Ł±czenie komórek | Zagnieżdżanie tabel | Czę¶ci tabeli | Obramowanie tabel i komórek w rozszerzeniach języka

Ogólne ramy tabeli

<TABLE> </TABLE>

Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowi± jej delimitery. W ich ramach s± umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

Wiersz tabeli

<TR> </TR>

Wiersz tabeli jest jej konkretyzacj±, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umie¶cić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu:

<TABLE>

<TR> </TR>

<TR> </TR>

<TR> </TR>

</TABLE>

Komórka w wierszu

<TD> </TD>

Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki s± umieszczane między znacznikami wybranego rzędu, na przykład:

<TABLE>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

</TABLE>

Uwaga: dla przejrzysto¶ci obrazu dokumentu w edytorze HTM warto umieszczać definicje wierszy tabeli jedn± pod drug±, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywi¶cie komórki można opisywać w edytorze także w kolejnych rzędach, co oczywi¶cie nie wpływa na ich faktyczne położenie w przegl±darce, wyznaczone przez definicję wiersza.

Przykład:

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, za¶ w konkretnych komórkach zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwiłę przyst±pimy do urozmaicania tabeli, dzięki czemu znacznie wzro¶nie jej przejrzysto¶ć i warto¶ć informacyjna.

Obramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Je¶li nie podamy szeroko¶ci obramowania, przyjmowana jest jej domy¶lna warto¶ć.

<TABLE BORDER> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Gdyby¶my podali szeroko¶ć obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przegl±darkę, na przykład:

<TABLE BORDER=10> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Obramowanie komórek

Aby komórki (nie tabela!) zawierały inne obramowanie niż domy¶lne, możemy użyć parametru CELLSPACING (de facto jest to odległo¶ć między komórkami).

<TABLE BORDER CELLSPACING=8> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Marginesy dla komórek

Je¶li uznamy, że odstęp między zawarto¶ci± komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domy¶lnie wynosi on 1).

<TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Oczywi¶cie należy w rozs±dny sposób ustawiać warto¶ci parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzyst± i niezbyt estetyczn±.

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Szeroko¶ć tabeli

Dotychczas tworzyli¶my tabele, które przybierały domy¶ln± szeroko¶ć na ekranie przegl±darki. Parametr WIDTH daje nam możliwo¶ć samodzielnego zdefiniowania szeroko¶ci tabeli. Podany parametr jest "silniejszy" od innych parametrów, które wpływaj± na szeroko¶ć tabeli na ekranie.

<TABLE BORDER WIDTH=600> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Zamiast warto¶ci absolutnej w pikselach możemy także użyć warto¶ci procentowej, np. pół szeroko¶ci ekranu przegl±darki.

<TABLE BORDER WIDTH=50%> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Szeroko¶ć komórki

Parametr WIDTH możemy wykorzystać także do zdefiniowania szeroko¶ci komórki, umieszczaj±c go w ramach definicji wybranej komórki, np. <TD WIDTH=100> </TD>. Można też podać warto¶ć procentow±, która odnosi się do szeroko¶ci komórki w ramach tabeli, a nie całego ekranu (akceptuj± j± Navigator i Internet Explorer, ale HTML 4.0 zaleca unikania tego polecenia).

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Wyrównanie tabeli

Parametr ALIGN pozwala wyrównać tabelę w stosunku do marginesów strony i oblewaj±cego j± tekstu, na przykład:

<TABLE BORDER ALIGN=right> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst

Jak widać, tekst wstawiony za definicj± tabeli "oblewa" j± z jednej lub drugiej strony, zależnie od rodzaju wyrównania.

<TABLE BORDER=10 ALIGN=left> </TABLE>

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst to jest jaki¶ tekst

Poziome wyrównanie danych w komórkach

Parametr ALIGN możemy także wykorzystać do poziomego wyrównania zawarto¶ci komórki - ¶rodkowania, justowania do lewej i justowania do prawej. Używamy wówczas odpowiednio konstrukcji
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>
<TD ALIGN=right> </TD>.
Wyrównanie jest wyraĽnie widoczne, gdy samodzielnie zdefiniujemy szeroko¶ć komórki za pomoc± WIDTH.

a1 - do lewej | a2 - ¶rodkowanie | a3 - do prawej
b1 - do lewej | b2 - ¶rodkowanie | b3 - do prawej
c1 - do lewej | c2 - ¶rodkowanie | c3 - do prawej

Wysoko¶ć tabeli

Możemy zdefiniować nie tylko szeroko¶ć, ale i wysoko¶ć tabeli (polecenie nie wchodzi w skład HTML 4.0), podaj±c parametr HEIGHT, wyrażony w pikselach lub procencie widocznej strony. W poniższym przykładzie zostały użyte parametry <TABLE BORDER WIDTH="50%" HEIGHT="30%">

Komórka a1 | Komórka a2
Komórka a3 | Komórka a4

Pionowe wyrównanie danych w komórkach

Parametr VALIGN (vertical) służy do pionowego wyrównania zawarto¶ci komórki - do górnego brzegu, do ¶rodka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji:
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>.
Wyrównanie jest wyraĽnie widoczne, gdy samodzielnie zdefiniujemy wysoko¶ć tabeli za pomoc± HEIGTH.

a1 - do górnego brzegu | a2 - do górnego brzegu | a3 - do górnego brzegu
b1 - do górnego brzegu | b2 - do dolnego brzegu | b3 - do ¶rodka

Kolor tła tabeli

Microsoft Internet Explorer i Nescape Communicator pozwalaj± wykorzystać kolor tła tabeli (HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów). W tym celu należy w definicji tabeli dodać parametr <BGCOLOR=barwa>, np. <TABLE BORDER HEIGHT=200 BGCOLOR=yellow>

.

Kolory - Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White (white), Green, Purple, Silver, Yellow, Aqua

a1 - do górnego brzegu | a2 - do górnego brzegu | a3 - do górnego brzegu
b1 - do górnego brzegu | b2 - do dolnego brzegu | b3 - do ¶rodka

Możemy również "pomalować" poszczególne komórki, wstawiaj±c definicję koloru w ramach definicji komórek, np. TD BGCOLOR="barwa" - HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów.

a1 - do górnego brzegu | a2 - do górnego brzegu | a3 - do górnego brzegu
b1 - do górnego brzegu | b2 - do dolnego brzegu | b3 - do ¶rodka

Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka, stosuj±c polecenie (HTML 4.0 nie przewiduje stosowania tego polecenia w tym kontek¶cie - możemy jednak stosować style):

<table background="nazwa_obrazka">

111 | 222 | 333
444 | 555 | 666
777 | 888 | 999

Kolor obramowania tabeli

Internet Explorer i Navigator interpretuj± także kolor obramowania tabeli. W definicji tabeli należy wstawić parametr <BORDERCOLOR=barwa>, np. <TABLE BORDER=5 BORDERCOLOR=red>.

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Odcień obramowania tabeli

Internet Explorer i Navigator pozwalaj± okre¶lić kolor cienia obramowania tabeli. Zauważmy, że cień konkretnego brzegu komórki dzieli się na dwie czę¶ci: jasn± - z lewej lub u góry, oraz ciemn± - z prawej lub u dołu. Mamy optyczne wrażenie, jakby¶my patrzyli na komórkę z lewej strony i od góry. Możemy nadać odrębn± barwę cieniowi lewemu i górnemu oraz odrębn± prawemu i dolnemu. Na przykład:

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

a1 | a2 | a3 | a4 | a5
b1 | b2 | b3 | b4 | b5
c1 | c2 | c3 | c4 | c5

Jeszcze wyraĽniej widać to w przypadku pojedynczej komórki.

pojedyncza komórka

Definicję cienia możemy nawet zastosować w wierszu lub w pojedynczej komórce, na przykład:

<TR BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Pierwsza komórka | Druga komórka
Trzecia komórka | Czwarta komórka

lub

<TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Pierwsza komórka | Druga komórka

Podpis pod tabel±

Tabela powinna na ogół zawierać tytuł, wyja¶niaj±cy jej tre¶ć. Należy go umie¶cić zaraz za ogóln± definicj± tabeli. Na przykład:

<TABLE BORDER WIDTH=300>
<CAPTION ALIGN=top>Tytuł tabeli umieszczony u góry</CAPTION>

Tytuł tabeli umieszczony u góry
a1 | a2 | a2
b1 | b2 | b3

lub

Tytuł tabeli umieszczony u dołu
a1 | a2 | a2
b1 | b2 | b3

Microsoft Internet Explorer pozwala dodatkowo dosun±ć podpis do lewej lub prawej strony, przy użyciu parametru VALIGN. Na przykład:

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=top ALIGN=left>Tytuł tabeli umieszczony u góry i z lewej strony</CAPTION>

Tytuł tabeli umieszczony u góry i z lewej strony
a1 | a2 | a2
b1 | b2 | b3

a także

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=bottom ALIGN=right>Tytuł tabeli umieszczony u dołu i z prawej strony</CAPTION>

Tytuł tabeli umieszczony u dołu i z prawej strony
a1 | a2 | a2
b1 | b2 | b3

Nagłówek wiersza i kolumny

Zazwyczaj w tabelach s± umieszczane nagłówki wierszy i kolumn, obrazuj±ce ich tre¶ć. Domy¶lnie nagłówki s± pokazywane za pomoc± czcionki pogrubionej. Na przykład:

Wzrost produkcji w latach 1991-1995 (w mln USD)
1991 | 1992 | 1993 | 1994 | 1995
--- | --- | --- | --- | ---
1150 | 1240 | 1380 | 1420 | 1550

Nagłówek jest definiowany za pomoc± parzystego kodu <TH> </TH>. Tak więc, aby sporz±dzić powyższ± tabelę, z wierszem nagłówków kolumn i wierszem danych, należy wprowadzić następuj±cy kod:

<TABLE BORDER CELLPADDING=10 WIDTH=400>

<CAPTION>Wzrost produkcji w latach 1991-1995 (w mln USD)</CAPTION>

<TR bgcolor="gray"><TH>1991</TH> <TH>1992</TH><TH>1993</TH> <TH>1994</TH> <TH>1995</TH> </TR>

<TR ALIGN=center><TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1420</TD><TD>1550</TD></TR>

</TABLE>

Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn (kolejne lata). W drugim znajduj± się dane liczbowe.

Podobnie, choć nieco inaczej, należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocz±ć od komórki z nagłówkiem.

<TABLE BORDER CELLPADDING=10 WIDTH=400>

<CAPTION>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</CAPTION>

<TR><TD></TD><TH>1991</TH> <TH>1992</TH> <TH>1993</TH> <TH>1994</TH> <TH>1995</TH> </TR>

<TR ALIGN=center><TH>Masło</TH> <TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1420</TD><TD>1550</TD></TR>

<TR ALIGN=center><TH>Margaryna</TH> <TD>800</TD><TD>900</TD><TD>980</TD><TD>1150</TD><TD>1320</TD></TR>

</TABLE>

co da w rezultacie:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
| 1991 | 1992 | 1993 | 1994 | 1995
Masło | 1150 | 1240 | 1380 | 1420 | 1550
Margaryna | 800 | 900 | 980 | 1150 | 1320

W wierszach z danymi liczbowymi wystarczyło wstawić kody nagłówków (Masło i Margaryna), zaraz za definicj± wiersza, a przed pierwsz± definicj± komórki z danymi.

Zauważmy też, że wiersz nagłówków z latami został poprzedzony pust± komórk±, dzięki czemu nagłówki zostały we wła¶ciwy sposób ułożone w stosunku do kolumn z danymi. Gdyby¶my chcieli, aby ta pusta komórka była "wklęsła", możemy w niej wstawić "lepk± spację", czyli kod &nbsp; (non-breaking space).

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
| 1991 | 1992 | 1993 | 1994 | 1995
Masło | 1150 | 1240 | 1380 | 1420 | 1550
Margaryna | 800 | 900 | 980 | 1150 | 1320

Ł±czenie komórek

Komórki danych i nagłówków można ze sob± ł±czyć. Na przykład:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
| 1991 | 1992 | 1993 | 1994 | 1995
Masło | 1950 | 2120 | 1380 | 1420 | 1550
Margaryna | 980 | 1150 | 1320

W powyższym przykładzie, znaj±c ł±czn± produkcję tłuszczów, ale nie znaj±c jej struktury, przedstawili¶my ł±czne dane dla dwóch kolejnych lat - 1991 i 1992.

Aby komórka w danym wierszu rozci±gała się na x wierszy, należy użyć w jej definicji parametru <TD ROWSPAN=x>. W naszej tabeli zostały opatrzone parametrem ROWSPAN=2 dwie pierwsze komórki z danymi w wierszu Masło (i oczywi¶cie podana ł±czna produkcja tłuszczów). Jednocze¶nie zostały usunięte dwie pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy komórki wiersza Margaryna (lata 1993-1995) dostosowały się do odpowiednich komórek w wierszu Masło.

Podobnie można ł±czyć komórki z nagłówkami:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
| 1991-1992 | 1993-1995
Masło | 2390 | 4350
Margaryna | 800 | 900 | 980 | 1150 | 1320

W przykładzie zostało pokazane poziome ł±czenie komórek, za pomoc± parametru <TD COLSPAN=x>.Poł±czono w ten sposób komórki nagłówków z latami i komórki dotycz±ce produkcji masła, której czasowej struktury nie znamy.

I jeszcze jeden przykład:

Wzrost produkcji tłuszczów i przetworów owocowych
w latach 1991-1995 (w mln USD)
| Produkt | 1991 | 1992 | 1993 | 1994 | 1995
Tłuszcze | Masło | 1150 | 1240 | 1380 | 1420 | 1550
Margaryna | 800 | 900 | 980 | 1150 | 1320
Przetwory owocowe | Dżem | 750 | 840 | 880 | 1020 | 1150
Marmolada | 400 | 500 | 570 | 750 | 820

Zagnieżdżanie tabel

Możliwe jest zagnieżdżanie tabel w komórkach nadrzędnej tabeli. W tym celu należy utworzyć w zwykły sposób definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach <TD> </TD>. Na przykład:

100 | 200 | 300
AAA | BBB
CCC | DDD
400 | 500 | 600

Łatwo dostrzec, że tabela złożona z dwóch wierszy i dwóch kolumn została zagnieżdżona w komórce z warto¶ci± 300.

Tabele - nagłówek, ciało i stopka

Podobnie jak cały dokument, także i tabela może mieć swoj± czę¶ć nagłówkow±, czę¶ć główn± i stopkę. Elementy te s± (teoretycznie) przydatne przy okre¶laniu wygl±du tabeli i wy¶wietlaniu tabeli:

- Wydzielenie nagłówka i stopki pozwoli wy¶wietlać zawsze na ekranie zawarte w nich informacje, gdy tabela przekracza wielko¶ci± ekran. Przewijana jest tylko główna czę¶ć tabeli (dane), a informacje nagłówka i stopki pozostaj± cały czas widoczne. Analogicznie, gdyby¶my drukowali większ± tabelę, która nie mie¶ci się na jednej stronie druku, nagłówek i stopka tabeli będ± drukowane na każdej kolejnej stronie, a zmieniać się będ± oczywi¶cie dane zawarte w BODY. Na razie przegl±darki nie interpretuj± w ten sposób nagłówka i stopki tabeli. Wszystkie trzy główne przegl±darki w swych najnowszych wersjach wy¶wietlaj± jednak poprawnie kolejno¶ć czę¶ci.
- Wydzielenie czę¶ci tabeli pozwala, razem z grupami kolumn, definiować obramowanie.

Uwaga: TFOOT musi być zdefiniowane w tabeli przed TBODY.

<TABLE WIDTH=50% BORDER=5 CELLPADDING=5>
<THEAD><TR><TD>To jest czę¶ć nagłówkowa</TD></TR></THEAD>
<TFOOT><TR><TD>To jest stopka</TD></TR></TFOOT>
<TBODY>
<TR>
<TD>Komórka 11</TD>
</TR>
<TR>
<TD>Komórka 21</TD>
</TR>
</TBODY>
</TABLE>

To jest czę¶ć nagłówkowa
To jest stopka
Komórka 11
Komórka 21

Znaczniki zamykaj±ce s± opcjonalne we wszystkich trzech poleceniach.

Obramowanie tabel i komórek w rozszerzeniach języka

HTML 4 zawiera szereg nowych poleceń pozwalaj±cych zdefiniować sposób wy¶wietlania obramowania tabel i komórek. Interpretuje je Internet Explorer.

WyjdĽmy od podstawowej definicji tabeli, zawieraj±cej, przykładowo, 3 wiersze i 3 kolumny. W definicji tabeli znajduje się także obramowanie. <TABLE BORDER>

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

Seria znaczników FRAME= pozwala wy¶wietlać w specjalny sposób obramowanie tabeli. Polecenie FRAME wstawiamy bezpo¶rednio do definicji tabeli, czyli <TABLE BORDER FRAME=co¶tam>.

FRAME=void pozwala usun±ć zewnętrzne obramowanie tabeli.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=above wstawia górn± krawędĽ obramowania, a FRAME=below - doln±.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=vsides wy¶wietla lew± i praw± krawędĽ obramowania tabeli, a FRAME=hsides - górn± i doln±.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=lhs wy¶wietla lew± krawędĽ obramowania, a FRAME=rhs - praw±.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

FRAME=box wy¶wietla wszystkie krawędzie obramowania.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

Pamiętajmy, że cały czas s± niezależnie od tego wy¶wietlane wewnętrzne linie, dziel±ce komórki tabeli. Obecno¶ć BORDER pozwala definiować obramowanie. Linie te możemy jednak także osobno definiować, o czym będzie mowa niżej.

Seria znaczników RULES= pozwala manipulować wewnętrznymi liniami tabeli.

<TABLE BORDER RULES=co¶tam>

RULES=none powoduje usunięcie linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

RULES=groups powoduje wy¶wietlenie tylko linii wewnętrznych dziel±cych czę¶ć nagłówka, ciała i stopki tabeli oraz grup kolumn. Groups zast±piły proponowane poprzednio polecenie basic.

Istotna informacja o kolumnach i grupach kolumn

W tabeli (zaraz za poleceniem <TABLE>) możemy definiować grupy kolumn, używaj±c polecenia COLGROUP SPAN (grupa) lub COL (pojedyncza kolumna). Przykładowo:

<COLGROUP SPAN=4 ALIGN=center> spowoduje wydzielenie grupy 4 kolumn (span=4) i ¶rodkowanie ich zawarto¶ci.
<COL ALIGN=RIGHT> spowoduje wydzielenie 1 kolumny i wyrównanie jej zawarto¶ci do prawego marginesu.

Możemy zagnieżdżać definicje grup kolumn:

<COLGROUP>
<COL ALIGN=RIGHT>
<COL ALIGN=LEFT>
<COLGROUP>
<COL ALIGN=CENTER>

Pierwszy wiersz powoduje wydzielenie pierwszej grupy kolumn. Drugi wiersz definiuje parametry pierwszej kolumny w grupie. Trzeci wiersz definiuje parametry drugiej kolumny w grupie. Czwarty wiersz wydziela drug± grupę kolumn. Pi±ty wiersz definiuje parametry pierwszej kolumny w drugiej grupie. Cechy definiowanych kolumn maj± pierwszeństwo przed cechami grup kolumn.

Przykładowa tabela, ł±cz±ca polecenia COLGROUP i RULES=GROUPS.

<TABLE border cellpadding=5 frame=void RULES=groups>
<COLGROUP SPAN=1 ALIGN=left>
<COLGROUP SPAN=4 ALIGN=center>
...

Pierwszy wiersz definiuje obramowanie, usuwa obramowanie zewnętrzne (frame=void) i definiuje obramowanie grup wierszy i kolumn (rules=groups).
Drugi wiersz wydziela grupę kolumn (de facto jedn±) dla potrzeb nagłówków wierszy.
Trzeci wiersz wydziela grupę 4 kolumn dla potrzeb danych liczbowych.

W efekcie uzyskamy przykładow± tabelę:

produkcja | 1993 | 1994 | 1995 | 1996
--- | --- | --- | --- | ---
¶liwki | 1,2 | 1,3 | 0,9 | 1,5
gruszki | 0,8 | 1,1 | 1,4 | 0,5
jabłka | 3,1 | 2,7 | 2,2 | 3,0
czere¶nie | 0,4 | 0,3 | 0,6 | 0,5
wi¶nie | 0,2 | 0,4 | 0,3 | 0,6
w mln ton |

RULES=rows powoduje wy¶wietlenie tylko poziomych linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

RULES=cols powoduje wy¶wietlenie tylko pionowych linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3

RULES=all powoduje wy¶wietlenie wszystkich linii wewnętrznych.

a1 | a2 | a3
b1 | b2 | b3
c1 | c2 | c3