TABELE
Tabele predstavljaju veoma zgodnu alatku za predstavljanje podataka na web stranici.
Pored klasicnog nacina upotrebe tabela, u HTML-u se tabele koriste i da bi se lakse kontrolisao razmestaj teksta i slika na vasoj stranici.
Ako ste vec pokusali da napravite neku web prezentaciju, sigurno znate o cemu govorim.
Ma koliko se trudili da poravnate tekst i slike na vasoj stranici one vam uvek nekako izmicu kontroli,
narocito kad predjete u neku drugu rezoluciju od one u kojoj ste prvobitno izradili vasu stranicu.
Smestanje elemenata vase stranice u celije tabele predstavlja klasican "trik" web dizajnera. U celije tabele mozete smestiti bilo sta: tekst, slike,
linkove, druge tabele itd.
Osnovni tag koji oznacava pocetak i kraj tabele je:
<![CDATA[<TABLE> ovde dodje sadrzaj tabele </TABLE>]]>
Sadrzaj tabele se stavlja unutar taga kojim se definise jedna celija tabele:<![CDATA[<TD> sadrzaj celije </TD>]]>
Tag koji je veoma slican prethodnom, a sluzi za definisanje naslovnih celija tabele je:<![CDATA[<TH> sadrzaj celije </TH>]]>
Tabela ne mora da sadrzi <th> tag, ali mora da sadrzi bar jedan <td> tag, u koji cete staviti sadrzaj vase tabele.
Redovi tabele se definisu pomocu taga:<![CDATA[<TR> <TD> sadrzaj celije </TD> <TD> sadrzaj celije </TD> ... </TR>]]>
a kao sto se vidi unutar njega se umecu <td> ili <th> tagovi koji defenisu celije tabele sa odgovarajucim sadrzajem.
- paznja !
- Ako ste tekstu van tabele upotrebom <font> taga dodelili neki font razlicit od default fonta, u Internet Exploreru ce se ovaj tag odnositi i na tekst u celijama tabele.
U Netscape Navigatoru ce tekst u tabeli biti prikazan u default fontu. Da bi i Netscape Navigator tekst u tabeli prikazao u zeljenom fontu moracete u svaku celiju posebno da ubacite <font> tag.
Po default-u tabele nemaju granicnu liniju (border). Da bismo dodelili nasoj tabeli granicnu liniju odgovarajuce debljine, u <table> tag se stavlja atribut
border, a vrednost debljine linije se zadaje u pikselima.
Posto je poznato da se najbolje uci iz primera, evo jedne tabele:
| Ime : | Prezime : | Nadimak : |
|---|
| Sinisa | Popovic | Pop |
a odgovarajuci HTML kod glasi:
<![CDATA[
<TABLE BORDER="2">
<TR>
<TH><FONT FACE="Verdana" SIZE="2">Ime :</FONT></TH>
<TH><FONT FACE="Verdana" SIZE="2">Prezime :</FONT></TH>
<TH><FONT FACE="Verdana" SIZE="2">Nadimak :</FONT></TH>
</TR>
<TR>
<TD><FONT FACE="Verdana" SIZE="2">Sinisa</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Popovic</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Pop</FONT></TD>
</TR>
</TABLE>
]]>
Kao sto se vidi, osnovna razlika izmedju teksta koji se nalazi unutar <th> i <td> tagova je u tome sto je tekst u prvom slucaju podebljan (bold) i centriran unutar celije,
a u drugom slucaju tekst nije podebljan i poravnat je uz levu ivicu celije.
Ivica tabele se priljubljuje uz sadrzaj celija maksimalno koliko je moguce. Sirina kolona je odredjena prvom celijom u svakoj koloni.
Naravno, ovim se ne iscrpljuje mogucnost formatiranja tabela.
U tu svrhu se koriste razni atributi od kojih cemo u daljem tekstu obraditi samo one najvaznije. Treba napomenuti da tabela uopste ne mora da bude uniformno formatirana,
tj. da se svakoj celiji moze dodeliti neko drugo svojstvo pomocu atributa koji se umecu u njen <td> tag.
Pre svega, da bismo tabeli dodelili odgovarajuce dimenzije koristicemo atribute height i width. Vrednost ovih atributa se kao i kod <img>
taga moze zadati ili u pikselima ili u procentima velicine prozora HTML browser-a. Ovaj drugi nacin definisanja je preporucljiv jer onda ne morate da razmisljate o rezoluciji ekrana.
Sledeci primer predstavalja tabelu sa sirinom od 80% i visinom od 30%:
| Ime : | Prezime : | Nadimak : |
|---|
| Sinisa | Popovic | Pop |
a odgovarajuci HTML kod je:
<![CDATA[
<TABLE BORDER="2" HEIGHT="30%" WIDTH="80%">
<TR>
<TH><FONT FACE="Verdana" SIZE="2">Ime :</FONT></TH>
<TH><FONT FACE="Verdana" SIZE="2">Prezime :</FONT></TH>
<TH><FONT FACE="Verdana" SIZE="2">Nadimak :</FONT></TH>
</TR>
<TR>
<TD><FONT FACE="Verdana" SIZE="2">Sinisa</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Popovic</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Pop</FONT></TD>
</TR>
</TABLE>
]]>
Ako zelite da vase kolone budu jednake sirine trebalo bi da u odgovarajuce <th> ili <td> tagove ubacite atribute width sa zeljenom siriniom.
U slucaju nase tabele to znaci da treba u svaki <th> tag staviti atribut width sa vrednoscu 33%.
Tako, na primer, mozemo napraviti tabelu koja ce se protezati preko cele sirine stranice, a svaka kolona ce zauzimati tacno trecinu sirine tabele:
| Ime : | Prezime : | Nadimak : |
|---|
| Sinisa | Popovic | Pop |
a HTML kod ove tabele glasi:
<![CDATA[
<TABLE BORDER="2" WIDTH="100%">
<TR>
<TH WIDTH="33%"><FONT FACE="Verdana" SIZE="2">Ime :</FONT></TH>
<TH WIDTH="33%"><FONT FACE="Verdana" SIZE="2">Prezime :</FONT></TH>
<TH WIDTH="33%"><FONT FACE="Verdana" SIZE="2">Nadimak :</FONT></TH>
</TR>
<TR>
<TD><FONT FACE="Verdana" SIZE="2">Sinisa</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Popovic</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Pop</FONT></TD>
</TR>
</TABLE>
]]>
Sledeca dva atributa takodje mogu biti veoma korisna: cellpadding i cellspacing.
Pomocu cellpadding atributa mozemo definisati rastojanje izmedju sadrzaja celije i njene granicne linije,
vrednost ovog atributa se zadaje u pikselima (po default-u je 1). Pomocu cellspacing atributa se moze odrediti
rastojanje izmedju pojedinih celija tabele (tj. debljina linije izmedju celija), takodje u pikselima (po default-u je 1).
Ako u nasoj tabeli zadam vrednost cellpadding atributa od 30 piksela, a vrednost cellspacing
atributa od 10 piksela dobicu sledecu tabelu:
| Ime : | Prezime : | Nadimak : |
|---|
| Sinisa | Popovic | Pop |
HTML kod ove tabele glasi:
<![CDATA[
<TABLE BORDER="2" CELLPADDING="30" CELLSPACING="10">
<TR>
<TH WIDTH="33%"><FONT FACE="Verdana" SIZE="2">Ime :</FONT></TH>
<TH WIDTH="33%"><FONT FACE="Verdana" SIZE="2">Prezime :</FONT></TH>
<TH WIDTH="33%"><FONT FACE="Verdana" SIZE="2">Nadimak :</FONT></TH>
</TR>
<TR>
<TD><FONT FACE="Verdana" SIZE="2">Sinisa</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Popovic</FONT></TD>
<TD><FONT FACE="Verdana" SIZE="2">Pop</FONT></TD>
</TR>
</TABLE>
]]>
U sledecem nastavku naucite jos neke cake oko koriscenja tabela u HTML dokumentima.
