Priznajem da kada sam pocinjao da ucim HTML mislio sam da su tabele bas zeznuta stvar. Kad pogledate kod neke iole kompleksnije tabele desice se mozda da se uplasite ali kada sam stigao do lekcije o njima i poceo da je vezbam video sam da je taj mali strah bio neopravdan. U sustini njihov kod, ovako na oko izgleda najsredjenije ali hajde da pocnemo da objasnjavamo kako to uz pomoc HTML koda crtamo i uredjujemo tabele.

Osnovni tag koji kaze web browseru da u vasem dokumentu postoji tabela jeste <table>. Ipak sam taj tag nije dovoljan da web browser nacrta tabelu kakvu ste vi zamislili.
Koliko redova ? Koliko kolona ? To odredjuju dva taga:
<tr></tr> zapocinje i zavrsava red u okviru tabele.
<td></td> oznacava celiju u redu

Da bi bilo jasnije prikazacemo kod gornje tabele:
<table width="200" border="1" align="left" hspace="10">
<tr> - pocetak prvog reda
<td bgcolor="#ff0000">1</td>
<td bgcolor="#ff0000">2</td>
<td bgcolor="#ff0000">3</td>
</tr> - kraj prvog reda
<tr> - pocetka drugog reda
<td bgcolor="#003399">4</td>
<td bgcolor="#003399">5</td>
<td bgcolor="#003399">6</td>
</tr> - kraj drugog reda
<tr> - pocetak treceg reda
<td bgcolor="#ffffff">7</td>
<td bgcolor="#ffffff">8</td>
<td bgcolor="#ffffff">9</td>
</tr> - kraj treceg reda
</table>

Zanemaricemo sad atribute taga <table>. Zasto sam obojio svaki red u drugu boju i zasto sam numerisao svaku celiju ? Pogledajte kod tabele. Rekli smo da tag <tr></tr> zapocinje i zavrsava red u tabeli. Koliko imamo boja u tabeli ? Koliko imamo <tr></tr> tagova u kodu ? Tri <tr> i tri zavrsetka ;</tr>. Koliko imamo redova u tabeli ? Imamo tri reda. Dali je sada malo jasnije ?
Obratimo sada paznju na celije. Rekli smo da tag <td></td> oznacava celiju u redu. Opet pogledajte kod. Koliko imamo tih tagova izmedju svakog taga <tr></tr> ? Imamo tri taga. Dakle imamo tri celije. Sad je jos jasnije ? Numerisao sam svaku celiju pa ih i na taj vizuelan nacin mozete povezati sa kodom.

Sada cemo da se pozabavimo atributima taga <table>. Opet pogledajte gornji kod. Atributi koje sam upotrebio su WIDTH-sirina, BORDER-velicina ivica u pikselima, ALIGN-poravnanje i HSPACE-prazno mesto oko tabele koje se racuna u pikselima.

WIDTH: Sirina same tabele moze biti izrazena u pikselima i procentima. U gornjem primeru ja sam sirinu tebele postavio na dvesta piksela. Kod ovakvog nacina odredjivanja sirine tabele, pikselima, treba napomenuti da ce zadata vrednost tj. sirina ostati nepromenjena osim ako se sadrzaj tabele ne prostire izvan zadate vrednosti sirine. Tada ce se tabela rasiriti onoliko koliko je potrebno da stane sav sadrzaj u nju. Drugi nacin odredjivanja sirine su procenti tj. koliko ce procenata od ukupne sirine stranice zauzimati tabela. Osnovna karakteristika ovog nacina odredjivanja sirine tabele jeste sto ce se sirina menjati kako se menja sirina stranice. Primer koda:

ALIGN: Sa ovim atributom smo se vec ranije susretali pa ga necu posebno objasnjavati. Ponovicu samo njegove vrednosti: LEFT, CENTER, RIGHT. Pomenucu ovde jedan atribut koji nisam koristio u tabeli sa vrha strane a sluzi da se vrsi poravnavanje po vertikali. to je tag <VALIGN>. Njegove vrednosti su: TOP, MIDDLE, BOTTOM.

HSPACE: Ovaj atribut omogucava da napravimo mesta oko tabele. Vrednost se izrazava u pikselima. Da tekst, sa vrha ove stranice, koji stoji sa desne strane tabele nebi bio prilepljen uz njenu desnu ivicu, iskoristio sam ovaj atribut da napravim 10 piksela razmak oko tabele. Kako bi sve to izgledalo da nisam stavio ovaj atribut:

1	2	3
4	5	6
7	8	9

Priznajem da kada sam pocinjao da ucim HTML mislio sam da su tabele bas zeznuta stvar. Kad pogledate kod neke iole kompleksnije tabele desice se mozda da se uplasite..... itd itd.

Sad uporedita razmak izmedju tabele i teksta na ovom primeru i na primeru sa vrha stranice. Dakle razlika se vidi i sad znate upotrebu i ovog atributa.

Jos jedan nacin da uredimo tabelu jeste da napravimo celiju zaglavlja tabele. Idealno za naslove i podnaslove. Za tu svrhu koristicemo tag <th>. Iskoristicemo nasu tabelu sa pocetka i dodacemo joj jos jedan red odgore koji ce biti to zaglavlje:

Naslov tabele
1	2	3
4	5	6
7	8	9

Sada smo dodali zaglavlje ali kao sto vidimo ono je samo prosirilo prvu koloni celija i skupilo drugu i trecu a to nije zeljeni efekat koji smo hteli.

Da bismo rasirili zaglavlje i da ono obuhvata sve tri celije u redu koristicemo atribut COLSPAN u tagu <th> pa ce to da izgleda kao u tabeli ispod:

Naslov tabele
1	2	3
4	5	6
7	8	9

Sta smo ovde uradili? Dakle ubacili smo jos jedan red, tagovima <tr></tr>, na vrhu za zaglavlje celije dodajuci izmedju njih tag <th></th> i njegov atribut COLSPAN. Dali mu vrednost 3. Zasto bas 3? Imamo tri celije preko kojih to zaglavlje treba da se siri. Sada smo dobili zeljeni efekat i lepo formatirali tabelu. Cela linija izgleda ovako:
<tr>
<th colspan="3">Naslov tabele</th>.
</tr>

Naslov tabele
1	2	3
4	5	6
7	8	9

U svaku <td></td> liniju pored boje celije dodali smo align="center".
Evo primera za prvu celiju: <td bgcolor="#ff0000" align="center">1</td>.

Korisni atributi vezani za uredjivanje tabela su CELLPADDING i CELLSPACING. Svojstvo prvog atributa je da odvoji sadrzaj u celiji od njenih ivica. Vrednost se izrazava u pikselima gde je predefinisana vrednost 1. Cellspacing se upotrebljava za odredjivanje rastojanja izmedju celija menjanjem debljine ivica izmedju njih. Oba ova atributa se upotrebljavaju u tagu <table>.

Sada je ostalo na vama da vezbate i da se igrate. Napravite svoju tabelu. Dodajte jos redova i kolona. Sad znate kako. Formatirajte je na svoj nacin. Menjajte ivice. Poravnajte je po zelji. Unesite podatke i centrirajte ih kako vama odgovara a mi cemo da nastavimo sa linkovima.