Table

       Posto je danas vec sasvim izvesno da su prosla vremena tzv. rucnog kreiranja okvirnih tabli putem ispisivanja HTML atributa i parametara, jer svaki HTML edotor ima radnu funkciju za iscrtavanje istih (ikona olovke ili tablature), onda ovde necemo gubiti vreme oko njihova ispisivanja, nego samo posvetiti paznju redosledu i znacenju pri upotrebi tih tagova, atributa i parametara, kako bi bili u stanju efikasno obaviti i neke eventualne rucne korekcije istih.
   Ubacivanje okvira tabele na stranicu se naznacava primenom <table></table> taga. Medjutim, kako cete vec videti u praksi, radi se zapravo samo o nacinu da se unutar <body></body> taga za telo dokumenta ubaci jos jedan nezavisan <body>, pa kako je taj naziv vec iskoristen onda je najprigodnije bilo ovome dati <table> simboliku. Naime, kao sto i sadrzaj <body> dokumenta mozemo izdeliti sa <table>, isto tako i <table> mozemo jos dodatno izdeliti unutar toga, a u tu svrhu nam onda idu <tr></tr> i <td></td> tagovi kao sadrzaj izmedju <table></table> taga, pa se tako konstrukcija tabele ogleda u svom osnovnom kosturu, poput vec obradjenog HTML kostura, koji u <table> slucaju izgleda kao:

  Unutar pocetnog <table> taga mogu ici vec poznati atributi bgcolor= width= | height= i align= stim sto za I Explorer vazi i atribut background= (parametar ../slika.gif ili *.jpg) kojim se u tabelu kao pozadina moze postaviti i neka slika. Medjutim, kako je u web-design vazno umece za jednak prikaz u oba browsera, preskocit cemo sve atribute koji nisu zajednicki, bar dok se Internet konkurencija konacno ne dogovori.

    <table>
      <tr>
      <td></td>
      </tr>
   </table>

Iznad, desno, upravo vidite primenu bgcolor= atributa na jednu parcelu unutar ovih tablatura (sav ovaj tekst je smesten u <td> parcele od <tr> kolona u <table> kosturu), sto govori da se ti atributi mogu ubacivati i unutar dodatnih <td> i <tr> tagova, tako da je svako parcelisanje podlozno istom unutrasnjem uredjenju po zelji. No, da prvo privedemo kraju pocetni <table> tag, a da to i bude bas u vidljivim table okvirima.

border= je atribut za ukljucivanje prikaza okvirnog rama oko <table> i kao parametar se daje broj u pikselima. Ako atribut nije naveden, onda u prikazu nema ni okvira. Ovde je sada primenjen, radi uocavanja razlike.
bordercolor= je atribut za odredjivanje boje okviru sa uobicajenim color parametrom.
bordercolorlight= je atribut kojim odredjujete ivicnu boju gornje i leve strane rama.
bordecolordark= je atribut kojim odredjujete ivicnu boju desne i donje strane rama. Na ovaj nacin, sa ova dva zadnja atributa dobijate efekat razlicite osencenosti, mada Netscape ignorise vas izbor boje i ravna se prema border podlozi.
cellspacing= atribut koji svojim parametrom u broju piksela odredjuje razmak izmedju ivica parcela koje cete praviti unutar <table></table> taga. Netscape tu svaki piksel uracunava duplo, pa treba voditi racuna o tome pri upotrebi.
cellpadding= takodje atribut za razmak od ivice parcele, ali ovaj put unutar nje, gde se brojem piksela odedjuje razmak unutrasnjeg sadrzaja od ivice okvira.

   A sada da nastavimo malo bez atributa i parametara za okvir, iako je i sve ovo unutar jednog <table> taga. Sada je konacno dosao red i na <tr> (Table Row) tag i njegovu ulogu u svemu ovome. Naime, u komunikaciji server/klijent browseri vrse prikaz primljenih podataka tako sto poput teksta ispisuju red po red tacaka s leva u desno, pocevsi od vrha, vodoravno u desno, pa tako na dole, red po red. Zbog te zakonitosti se i parcelisanje jedne <table> obavlja po istom redosledu, pocevsi od njenog gornjeg levog ugla, pa u tom redu na desno. Tu liniju ili red predstavlja <tr></tr> tag i u ovom primeru gore se da videti takvih sest <tr></tr> redova od kojih je svaki jos izparcelisan u po dve <td></td> parcele. Posto se u standardnoj PC terminologiji te parcele inace nazivaju celijama, od sada cemo i ovde primenjivati taj izraz za njih. Znaci, koliko ima <tr> tagova u telu gornjeg table primera <table>, toliko ima i vodoravnih podela tog table tela na delove.. A koliko unutar tih <tr> tagova imamo i <td> tagove, toliko nam je i ta jedna vodoravna celija presecena uspravno na manje <td> celije. Unutar tih tagova idu i atributi duzine i visine koima odredjejete i velicine celija, pa je sve na dalje stvar prakse. Inace, HTML editori automatski podesavaju te velicine, prema kolicini upisanog teksta ili ubacenoj slici. U <table>primeru koji sledi prikazan je jedan nacin koristenja ovih HTML funkcija, gde su table okviri opet vidljivi, kako bi se lakse uocila svrha podele.

Ovde cemo da ispisemo tekst koji centriran ide citavom duzinom jednoga <tr> kako bi

time sto jednostavnije i efektnije demonstrirali nacin kojim se oko neke slike (ali bez prikaza ovih ramova koji se sada ovde namerno vide), a pomocu <tr> i <td> tagova za odredjivanje celija moze

U ovoj celiji je prostor za sliku po vasem izboru

 lepo "omotati" tekst, tako da slika ne uzrokuje povecan razmak izmedju redova.

A ovde se moze dodati i nesto sasvim deseto za sadrzaj prezentacije

  Ovde se sasvim lepo vidi kako je velicina slike automatski povecala i odredila dimenzije svih celija u svome redu, ali zato imamo i dodatnu mogucnost da i te susedne celije (desni primer) onda dodatno izdelimo ili ne (levi primer). To se radi pomocu uvodjenja atributa rowspan= ili colspan= unutar <td> taga gde je parametar broj kojim se odredjuje na koliko delova cemo, vodoravno ili uspravno izdeliti tu celiju. Kao sto znate, mozete klikom na button dole, izabrati opciju Page Source i dobiti na uvid HTML sadrzaj ove prezentacije, pa malo razgledati primenu navedenog. A mozete uzeti i neke druge web primere sa Interneta. Iz svega cete sasvim lako uvideti da se mnogi atributi ravnopravno koriste unutar svih tagova, kao i da nema nikakve razlike u pravilima oko izrade teksta ili primene slika, kako u telu neizdeljenog <body> taga, tako i u telu neke ma i najmanje <td>celije. Pravila su ista.
   I, kako je vec navedeno, posto najveci deo ovoga posla HTML editori obavljaju brzo i vrlo uspesno sa svojim Table alatkama, izradjujuci vam automatski sve zadate tagove, atribute i parametre, pre nego predjete na lekciju o Frames, zapamtite detalj da ce Netscape uglavnom ignorisati celiju u kojoj nema nikakvog sadrzaja, sto moze dovesti do cudnovatih prikaza prezentacije u njemu. To eliminisete jednostavno tako sto u tu praznu celiju ukucate bar tacku ili bilo koje slovo i obojite ga u boju pozadine na kojoj se prikazuje, tako da se time stopi i postane "nevidljivo" u browser prikazu. Netscape tada uvazava kompletnu velicinu celije i sve demonstrira kao prazninu koju ste i hteli napraviti.

Radovanovic Dragan