Strona g│≤wna - HTML dla bardzo pocz▒tkuj▒cych - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsy│acze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - P│ywaj▒ce ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - KsiΩga go╢ci - Kana│y informacyjne - NarzΩdzia - S│owniczek - Znaki specjalne - Ankieta



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

Tabele


[hand]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.


[hand]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>


[hand]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:

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

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.


[hand]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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

Gdyby╢my podali szeroko╢µ obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przegl▒darkΩ, na przyk│ad:

<TABLE BORDER=10> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

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▒.

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]Szeroko╢µ kom≤rki

Parametr WIDTH mo┐emy wykorzystaµ tak┐e de 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).

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

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


[hand]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 leweja2 - ╢rodkowaniea3 - do prawej
b1 - do lewejb2 - ╢rodkowanieb3 - do prawej
c1 - do lewejc2 - ╢rodkowaniec3 - do prawej

[hand]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 a3Kom≤rka a4

[hand]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


[hand]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, Green, Purple, Silver (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


[hand]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>.

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]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>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

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≤rkaDruga kom≤rka
Trzecia kom≤rkaCzwarta kom≤rka

lub

<TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Pierwsza kom≤rkaDruga kom≤rka

[hand]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
a1a2a2
b1b2b3

lub

Tytu│ tabeli umieszczony u do│u
a1a2a2
b1b2b3

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</CAPTION>

Tytu│ tabeli umieszczony u g≤ry i z lewej strony
a1a2a2
b1b2b3

a tak┐e

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=bottom ALIGN=right>Tytu│ tabeli umieszczony u g≤ry</CAPTION>

Tytu│ tabeli umieszczony u do│u i z prawej strony
a1a2a2
b1b2b3


[hand]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)
19911992199319941995
11501240138014201550

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)
19911992199319941995
Mas│o11501240138014201550
Margaryna80090098011501320

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)
 19911992199319941995
Mas│o11501240138014201550
Margaryna80090098011501320

[hand]ú▒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)
 19911992199319941995
Mas│o19502120138014201550
Margaryna98011501320

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 kolumn, 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-19921993-1995
Mas│o23904350
Margaryna80090098011501320

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)
 Produkt19911992199319941995
T│uszczeMas│o11501240138014201550
Margaryna80090098011501320
Przetwory owocoweD┐em75084088010201150
Marmolada400500570750820

[hand]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:

100200300
AAABBB
CCCDDD
400500600

ú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.


[hand]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:

<TABLE WIDTH=50% BORDER=5 CELLPADDING=5>
<THEAD>To jest czΩ╢µ nag│≤wkowa</THEAD>
<TBODY>
<TR>
<TD>Kom≤rka 11</TD>
</TR>
<TR>
<TD>Kom≤rka 21</TD>
</TR>
</TBODY>
<TFOOT>To jest stopka</TFOOT>
</TABLE>

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


[hand]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Ω:

produkcja1993199419951996
╢liwki1,21,30,91,5
gruszki0,81,11,40,5
jab│ka3,12,72,23,0
czere╢nie0,40,30,60,5
wi╢nie0,20,40,30,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