HTML KNJIGA |
TABLICE 1 |
|
||||||||||||||||||||||||||||
Tablice predstavljaju veoma koristan alat za predstavljanje podataka na web stranici. Pored klasičnog načina upotrebe tablica, u HTML-u se tablice koriste i da bi se lakše kontrolirao razmeštaj teksta i slika na stranici. Ako ste već pokusali napraviti neku web prezentaciju, sigurno znate o čemu govorim. Ma koliko se trudili da poravnate tekst i slike na vašoj stranici one vam uvijek nekako izmiču kontroli, naročito kad pređete u neku drugu rezoluciju od one u kojoj ste prvobitno izradili vašu stranicu. Smještanje elemenata stranice u polje tablice predstavlja osnovni oslonac web dizajnera. U polje tablice možemo smjestiti tekst, slike, linkove, druge tablice itd. Osnovni tag koji označava početak i kraj tablice je: <table>Sadržaj tablice</table> Sadržaj tablice stavlja se unutar taga kojim se definira jedno polje tablice: <td> Sadržaj polja </td> Tablica ne mora sadržavati <th> tag, ali mora sadržavatii bar jedan <td> tag, u koji ćemo staviti sadržaj tablice. Redovi tablice definiraju se pomoću taga: <tr> <td> Sadržaj polja </td> <td> Sadržaj polja </td> ... </tr> Unutar njega se umeću <td> ili <th> tagovi koji defeniraju polje tablice sa odgovarajućim sadržajem.
Po default-u tablice nemaju graničnu liniju (border). Da bi dodijelili našoj tabeli graničnu liniju odgovarajuće debljine, u <table> tag se stavlja atribut border, a vrijednost debljine linije zadaje se u pikselima. Primjer tablice:
Odgovarajući HTML kod glasi: <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">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Pepe</font></td> </tr> </table>Osnovna razlika između teksta koji se nalazi unutar <th> i <td> tagova je u tome što je tekst u prvom slučaju podebljan (bold) i centriran unutar polja, a u drugom slučaju tekst nije podebljan i poravnat je uz lijevu ivicu polja. Ivica tablice se priljubljuje uz sadržaj polja maksimalno koliko je moguće. Širina stupca određena je prvim poljem u svakom stupcu. Ovim se ne iscrpljuje mogućnost formatiranja tablica. U tu svrhu koriste se razni atributi od kojih ćemo u daljnjem tekstu neke obraditi. Treba spomenuti da tablica uopće ne mora biti jednako formatirana, tj. svakom se polju može dodijeliti neko drugo svojstvo pomoću atributa koji se umeću u njen <td> tag. Prije svega, da bi tablici dodijelili odgovarajuće
dimenzije koristit ćemo atribute width i height. Vrijednost
ovih atributa se kao i kod <img>
taga mođe zadati ili u pikselima ili u postocima veličine prozora
HTML browser-a. Slijedeći primjer predstavalja tablicu sa širinom od 80% i visinom od 300 piksela:
a odgovarajući HTML kod je: <table border="2" width="80%" height="300" > <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">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Pepe</font></td> </tr> </table> Ako želimo da stupci budu jednake širine trebalo bi u odgovarajuće <th> ili <td> tagove ubaciti atribute width sa željenom širiniom. U slučaju naše tabele to znači da treba u svaki <th> tag staviti atribut width sa vrijednošću 33%. Tako, na primjer, možemo napraviti tablicu koja će se protezati preko cijele širine stranice, a svaki stupac će zauzimati točno trećinu širine tablice: a HTML kod ove tabele glasi:
<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">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Pepe</font></td> </tr> </table>Slijedeća dva atributa također mogu biti veoma korisna: cellpadding i cellspacing. Pomoću cellpadding atributa možemo definirati rastojanje između sadržaja polja i njegove granične linije, vrijednost ovog atributa se zadaje u pikselima (po default-u je 1). Pomoću cellspacing atributa može se odrediti rastojanje između pojedinih polja tablice (tj. debljina linije između polja), također u pikselima (po default-u je 1). Ako u našoj tablici zadamo vrijednost cellpadding atributa od 30 piksela, a vrijednost cellspacing atributa od 10 piksela dobit ćemo slijedeću tablicu:
HTML kod ove tabele glasi: |
||||||||||||||||||||||||||||||
|