<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.
<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>
<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.
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 |
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 |
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 |
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 |
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).
a1 | a2 | a3 | a4 | a5 |
b1 | b2 | b3 | b4 | b5 |
c1 | c2 | c3 | c4 | c5 |
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 |
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 |
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 |
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 |
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 |
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>
a1 | a2 | a2 |
b1 | b2 | b3 |
lub
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</CAPTION>
a1 | a2 | a2 |
b1 | b2 | b3 |
a tak┐e
<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=bottom ALIGN=right>Tytu│ tabeli umieszczony u g≤ry</CAPTION>
a1 | a2 | a2 |
b1 | b2 | b3 |
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:
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:
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 (non-breaking space).
1991 | 1992 | 1993 | 1994 | 1995 | |
---|---|---|---|---|---|
Mas│o | 1150 | 1240 | 1380 | 1420 | 1550 |
Margaryna | 800 | 900 | 980 | 1150 | 1320 |
Kom≤rki danych i nag│≤wk≤w mo┐na ze sob▒ │▒czyµ. Na przyk│ad:
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 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:
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:
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 |
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
|
||||
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:
<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.
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 |