You are on page 1of 16

 

Jedan od najmoćnijih alata u kreativnom dizajniranju 
web stranice je tabela. Ona omogućava da se i tekst i 
grafika uređuju unutar više kolona i redova.  

Bordure definisane stilom kao što su 
border‐style: ... 
border‐width: ... 
border‐color: ... 
odnose se na bilo koji element web stranice, a 
definišu se u okviru taga <style> sa CSS atributima u 
<head> sekciji.  
Sa postavljenim tagovima <table> i </table> sledeće što 
treba uraditi jeste definisati prvi red u tabeli. 
Redovi se definišu tagovima <tr> i </tr>. Svaki red može da 
sadrži više ćelija pre nego što se zatvori tagom </tr>. Ove 
ćelije se definišu tagom <td>. Inače td ima značenje table 
data. Svi podaci vezani za jednu ćeliju postavljaju se 
između tagova <td> i </td>. 
Atribut border omogućava da se definiše bordura oko cele 
tabele, sa vidljivim granicama između ćelija. Vrednost se 
zadaje u pikselima. 
cellspacing je razmak između ćelija izražen u pikselima. 
cellpadding je odbijanje sadržaja od ivica unutar ćelija. 
<th> predstavlja heading tabele, isti je kao i <td> ali obično 
prikazuje tekst centriran i podebljan. 

 

U ovom primeru, umesto upotreba atributa border, 
cellspacing i cellpadding, korišćeni su stilovi 
definisani kao interni CSS (između tagova <style> ... 
</style>) smešten u <head> sekciji HTML dokumenta.
Za celu tabelu važi:  
border‐spacing: 3px  3px – ovo je identično 
cellspacing atributu; dve vrednosti određuju posebno 
odbijanje sa gornje/donje strane i sa leve/desne 
strane. 
border: 5x  outset  silver – ovo je slično atributu 
border ali sa više detalja (stilom može istovremeno 
da se odredi širina bordure, tip linije kao i boja 
bordure) 
padding: 5px – ovo je definisano za svako polje (td) i 
slično je atributu cellpadding 
Pravila stila kao što su  
background‐color:boja 
background‐image:url(slika.gif) 
color:boja 
važe i kada se primenjuju kod tabela. Ako se ova 
pravila definišu stilom unutar taga <table> onda se 
primenjuju na celu tabelu; ako se postave unutar 
taga <tr> onda se primenjuju samo na taj jedan red i 
kada se definišu unutar taga <td> (odnosno, <th>) 
onda važe samo za to jedno polje. 

 

 
 

Atributi rowspan i colspan omogućavaju da se dato 
polje (ćelija tabele) proširi preko više redova i/ili više 
kolona.  

Pri tome ćelije u redovima ili kolonama zahvaćenim 
ovim proširenjem bivaju potisnute na desno. Da bi se 
zadržala konzistentnost veličine tabele, potrebno je 
obrisati višak <td>..</td> tagova u zahvaćenim 
redovima i/ili kolonama. 

Konačni efekat je takav da polja izgledaju kao da su 
međusobno „spojena“. 

 
Osnovni kôd tabele (pre „spajanja“ polja) 

 

Kôd html stranice sa tabelom čija se polja pružaju 
preko više redova i kolona. 
 

Rešenje 

 

   

 
 

 

Čitava tabela može da se postavi unutar jednog polja druge 
tabele. Ta unutrašnja (ugnježdena) tabela posedovaće sve 
kvalitete glavne tabele. 

Ugnjeđdene table otvaraju čitav jedan prostor mogućnosti 
za kreativno uređivanje web stranice. Na primer, ako želite 
tekst sa leve strane slike, možete napraviti dvostubačnu 
tabelu sa slikom u jednom polju i tekstom u drugom. 

 

Primer ovde prikazuje više tabela. Osnovna tabela je 
sa četiri red i po jedno polje u svakom redu (jedna 
kolona). 
U drugom redu osnovne tabele umetnuta je 
jednoredna tabela sa tri polja (tri kolone) u kojima je 
predviđeno da se prikaže slika, osnovni podaci o 
igraču i njegove karakteristike. 
U trećem redu osnovne tabele umetnuta je tipična 
tabela sa podacima iz različitih sezona. Umetnuta 
tabela sastoji se od pet redova i devet kolona. 
U poslednjem redu osnovne tabele ukucan je kontakt 
link u vezi sa ovim igračem (e‐mail adresa). 
Vizuelno, ova stranica u browseru ne odaje utisak da 
je za layout korišćena tabela. 

 
 

 

 
 

 

Ranije je pokazano kako se postavljaju slike i od njih prave 
grafički linkovi ka drugim dokumentima. Na pr: 
<a href="destinacija.html"> 
<img src="slika_sm.gif" alt="Moja slika" title="Klikni na sliku 
da otvoris destinaciju." /> 
</a> 
Slika takođe može da se podeli na regione koji mogu nezavisno 
da se linkuju za različita dokumenta u zavisnosti od toga gde 
na slici korisnik klikne. Ovo se naziva „imagemap“, i bilo koja 
slika može da se pretvori u imagemap‐u.  
1. Na primer, web sajt sa tematikom medicine može da 
prikaže sliku anatomske građe ljudskog tela sa mapiranim 
oblastima na slici koja otvaraju stranice sa odgovarajućom 
informacijom i savetima u vezi nekog organa.  
2. Drugi primer, može da bude mapa sveta sa zemljama u 
obliku grafičkog linka koji pruža regionalne informacije o 
izabranoj zemlji.  
3. Neki dizajneri koriste imagemape za kreiranje navi‐gacione 
palete koja integriše ikone svake web stra‐nice tog sajta u 
jedinstvenu kohezivnu imagemapu. 
Savremeni browseri (IE ili Firefox) omogućavaju dva metoda 
implementacije imagemapa. Danas bi sve imagemape trebalo 
kreirati novijim metodom, koji se naziva Client‐Side 
Imagemap. 
Imagemape generalno se retko koriste u vrlo posebnim 
slučajevima. Mnogo lakše i efikasnije je koristiti više običnih 
slika postavljenih neposredno jedna do druge sa odvojenim 
linkom za svaku od njih. 
Takođe, usled razvoja CSS‐a i HTML‐a, pojavom responzivnog 
dizajna ove image mape ne mogu da ispune očekivanja. Usled 
toga, sve više se koristi SVG format koji omogućava skaliranje 
vektorske grafike 
Dobar primer je slika ili grafika koja može da se rastavi na 
odvojene pravougaone oblasti. Hokejaški teren može da se 
upotrebi kako bi se objasnile promene pravila uvedene u 
sezoni 2005. 

Međutim, bolje rešenje jeste da se cela slika iseče na 
vertikalne oblasti, a zatim da svaki deo bude odvojena slika 
na web stranici.  Slike mogu da se urede tako da u 
konačnom prikazu izgledaju isto kao slika kompletnog 
terena. Prednosti su u tome što je stranica povratno 
kompatibilna sa starijim browserima, a kôd je mnogo 
jednostavniji, jer nije potrebno matematičko opisivanje 
oblasti unutar jedne slike. 

Na drugoj slici je prikazano kako iseći celu sliku tako da 
svaki link bude odvojena slika (na slici se vide 6 delova 
polovine terena). 

 

Dakle, dokazali smo da je moguće kreirati iluziju 
imagemape bez korišćenja imagemape. Zašto biste 
onda koristili Imagemap? 

Samo kada su delovi slike, za koje želimo napraviti 
linkove, izuzetno brojni i nepravilno postavljeni tako 
da bi bilo izuzetno naporno kreirati isečke. Samo tada 
prednost imaju Imagemape.  
Pre XHTML‐a, atributi id i name imali su istu ulogu u 
tagu <map>, tako da se može ukucati i raniji kôd: 

<map name="teren"> 

Međutim, XHTML standardi zahtevaju upotrebu id 
umesto name. 

Tagom <area /> određuje se oblast na slici, tj mapira 
se link u određenoj oblasti na slici.  

 

Tag <area /> ima četiri atributa sa kojima se definiše svaka 
oblast na mapiranoj slici: 

1. shape označava oblik regiona i može da bude kružnica, 
pravougaonik ili nepravilni poligon 
2. coords obezbeđuje egzaktne pikselske koordinate za 
izabranu oblast. Kod kružnica to su x, y centra i 
poluprečnik; za pravougaonik to su x,y koordinate 
levog gornjeg temena i x,y koordinate desnog donjeg 
temena; kod poligona zadaju se koordinate svih 
temena po redosledu povezivanja 
3. href određuje stranicu ili datoteku sa kojom će se 
povezati data oblast na slici.  
4. alt i title omogućavaju dodavanje opisnog teksta uz 
mapiranu oblast na slici. 

Poslednji korak kod izrade mapiranh oblasti na slikama 
jeste da se mapa poveže sa odgovarajućom slikom. 
Mapirana slika postavlja se na stranicu običnim tagom  
<img />. Međutim, dodatni atribut usemap se koristi u 
ovom spajanju mape sa slikom:  
<img src="Ice_hockey_layout.png" alt="Opis delova 
terena" title="Objasnjenje delova terena" 
usemap="#teren" style="border:none" /> 
Kada se koristi usemap, vrednost koja mu se pridružuje je 
name ili id koji je korišćen prilikom definisanja mape, sa 
obaveznom # ispred! 
Takođe, moguće je definiciju mape postaviti u drugoj 
datoteci tako što se koristi atribut usemap sa referencom 
na datoteku i na mapu u toj datoteci. Na primer ako 
koristite mapiranu sliku na svakoj stranici vašeg sajt, onda 
je mnogo jednostavnije da na jednoj stranici postavite sve 
<map> i <area /> tagove, umesto da ih ponavljate na 
svakoj stranici gde se Imagemap pojavljuje. 
 

 

 
 

U ovom primeru, korišćena je SVG slika sa jasno 
definisanim „shape“‐ovima. Ovakva slika može da se 
kreira u bilo kom programu za vektorsko crtanje (na 
primer, Adobe Illustrator ili CorelDraw). Potom se 
kôd doradi tako da se odgovarajuće oblasti prikazuju 
sliku u pozadini i i ograđene su ankorima. Tako svaka 
oblast ima svoj link. Ovo je slično imagemap‐ama, ali 
je postupak potpuno drugačiji. Prednost je što je 
oblast skalabilna pa se odlično ponaša kod 
responzivnog dizajna web stranica.