TABLICA 1

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.

Napomena:

Ako smo tekstu van tablice upotrebom  taga dodijelili neki font različit od default fonta, u Internet Exploreru će se ovaj tag odnositi i na tekst u poljima tablice. U Netscape Navigatoru će tekst u tablici biti prikazan u default fontu. Da bi i Netscape Navigator tekst u tabeli prikazao u željenom fontu moramo u svako polje posebno ubaciti  tag.

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:

Ime :	Prezime :	Nadimak :
Petar	Petrovic	Pepe

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.
Ovaj drugi način definiranja je preporučljiv jer onda ne moramo razmišljati o rezoluciji ekrana.

Slijedeći primjer predstavalja tablicu sa širinom od 80% i visinom od 300 piksela:

Ime :	Prezime :	Nadimak :
Petar	Popovic	Pepe

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%">Ime :</th> <th width="33%">Prezime :</th> <th width="33%">Nadimak :</th> </tr> <tr> <td>Petar</td> <td>Petrovic</td> <td>Pepe</td> </tr> </table>

<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:

Ime : Prezime : Nadimak :

Petar Petrovic Pepe

HTML kod ove tabele glasi:

<table border="2" cellpadding="30" cellspacing="10">
<tr>
 <th width="33%">Ime :</th>
 <th width="33%">Prezime :</th>
 <th width="33%">Nadimak :</th>
</tr>
<tr>
 <td>Petar</td>
 <td>Petrovic</td>
 <td>Pepe</td>
</tr>
</table>

Uvod	Boje	Uređivanje teksta 1	Uređivanje teksta 2	Liste
Linkovi	Grafika		Tablice 2	Marquee
Početak		Home		Kraj