MULTIMEDIJI I GLOBALNI MEDIJI
HTML I CSS
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Uvod
Tabele su veoma korisne kod predstavljanja podataka na web sajtu. One na Webu imaju interesantnu istoriju - zahtevaju malo diskusije pre nego što
počnete da ih pravite.
Kao što većina čitalaca već zna, Web je napravio fizičar. Tim Berners Lee je imao viziju da će ta tehnologija da se koristi za distribuciju i deobu dokumenata vezanih za rad istraživača. Tabele predstavljaju proširenje originalne ideje. One su dodate u HTML kao način da se podaci dele sa drugim istraživačima
i naučnicima.
U to vreme nije postojao CSS, tako da nije bilo načina da se na strani rasporedi sadržaj. Pošto tabele čine mrežu, ubrzo su počele da se koriste za prikazivanje sadržaja, a ne podataka. One su bile alat za raspoređivanje sadržaja na strani, pošto drugi alat nije postojao.
I danas su tabele primarni način za raspoređivanje sadržaja u web dokumentu. Ovaj pristup je ipak skopčan sa određenim problemima. Rasporedi zasnovani na tabelama se duže učitavaju i često su izuzetno detaljni, tako da ih je teško efikasno održavati. Tabele koje se koriste za raspoređivanje ne prate
strukturne primese koje su bitne kod mašina za pretraživanje, tako da njihova upotreba može da spreči pronalaženje informacija. Na kraju, možda i najvažnije,
rasporedi sa tabelama postavljaju mnoge prepreke vezane za dostupnost.
Upotreba tabela za raspoređivanje je jedan od nedostataka u istoriji HTML-a, pošto se elementi i atributi koji su napravljeni sa jednim ciljem, a to je
predstavljanje tabelarnih podataka, koriste za nešto sasvim drugo. Nema sumnje da su rasporedi sa tabelama promenili izgled Weba, ali sada kada imamo CSS,
nema razloga da se tabele koriste za rasporede. Tabele, umesto toga mogu ponovo da se koriste za ono za šta su i napravljene - za prikazivanje podataka.
Jedan pristup, poznat pod imenom prelazni dizajn, inkorporira upotrebu tabela i CSS-a da se dobiju rasporedi koji su kompatibilni sa starim
pretraživačima. Ova tehnika je sjajan pristup ako brinete o podršci u pretraživačima koji su stariji od savremenih verzija. Ipak, najbolje je da izbegavate tabele,
osim ako ih koristite za ono za šta su i napravljene.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Element table
Kreiranje tabela počećemo elementom table. Ovaj element upozorava pretraživač da treba da se nacrta tabela. Smatra se da ovaj element nije prazan,
pošto sadrži tekstualni sadržaj. Zbog toga se piše sa oznakom otvaranja i zatvaranja:
<table>
</table>
U ovom slučaju se u pretraživaču ništa ne prikazuje. I dalje morate da dodate druge elemente da bi se nešto prikazalo. Pre toga ćemo objasniti neke
atribute elementa table.
Širina tabele
Ako želite da podesite širinu tabele, to možete da uradite u oznaci za otvaranje tabele, širina se može zadati u pikselima i procentima. Ako se zada u
pikselima, onda je to fiksna vrednost, odnosno tabela ima tačno određenu širinu (videti primer 4.1).
Primer 4.1 Tabela sa širinom zadatom u pikselima
<table width=”250”>
</table>
Bez obzira na to koliki je prozor pretraživača, tabela čija je širina zadata na ovaj način ostaje ista, odnosno 250 piksela.
Ako se vrednost zada u procentima, onda je to promenljiva vrednost (dinamička), pošto će se tabela proširiti u skladu sa procentima raspoloživog prostora (videti primer 4.2).
Primer 4.2 Tabela sa širinom zadatom u procentima
<table width=”90%”>
</table>
U ovom slučaju tabela zauzima 90% raspoloživog prostora prozora pretraživača.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Okviri tabela i rastojanja
Svojoj tabeli možete da dodate okvir na sledeći način (pomoću HTML-a):
<table width=”250” border=”1”> Ako napišete ovaj kod, oko tabele će se napraviti okvir širine 1 piksel.
Ako želite da između ćelija tabele dodate izvestan razmak, možete koristiti atribut “cellspacing”. Ako želite da dodate razmak između ćelije tabele i
teksta koji se nalazi u toj ćeliji, koristićete atribut cellpadding.
<table width=”250” border=”1” cellspacing=”5” cellpadding=”5”>
Kao što je slučaj i sa svim drugim atributima koji su vezani za prezentaciju, i atributima width, border, cellspacing i cellpadding treba rukovati pomoću
CSS-a, u kojem postoji mnogo više opcija vezanih za primenu te prezentacije. Ipak je bitno da se upoznate sa ovim atributima, tako da ćete ih u ovom poglavlju
koristiti za kreiranje tabele sa podacima. Kasnije ih možete menjati pomoću CSS-a.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Dodavanje vrsti u tabelu
Drugi kritičan element tabela je vrsta u tabeli. Ona se predstavlja elementom tr (videti primer 4.3).
Primer 4.3 Tabela sa jednom vrstom
<table width=”90%” border=”1” cellspacing=”5” cellpadding=”5” >
<tr>
</tr>
</table>
Svaka tabela mora da ima najmanje jednu vrstu. Vrste se u tabeli postavljaju po horizontali, iako prethodni primer neće ništa prikazati na ekranu, kasnije
ćemo dodati komponente koje su potrebne da bi se videlo šta tabela sadrži.
U tabelu možete dodati onoliko vrsta koliko je potrebno.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Dodavanje ćelija tabele
Ćelija tabele formira vertikalne kolone tabele. One su predstavljene oznakama table data:
<td>
</td>
Pored elemenata table i tr, element td je treći element koji je neophodan za kreiranje tabela (videti primer 4.4).
Primer 4.4 Tabela sa jednom vrstom i tri kolone
<table width=”90%” border=”1” cellspacing=”5” cellpadding=”5”>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Pošto sada imate sve potrebne gradivne elemene, tabela će se u pretraživaću prikazati bez ikakve dodatne pomoći (videti sliku 4.1).
Slika 4.1 Anatomija jednostavne tabele: tri ćelije, jedna vrsta, širina 90%, cellspacing 5.
Naravno da možete da dodate koliko god želite kolona i ćelija u tabelu. Pored toga, moguće je i obogatiti ćelije tabele zaglavljima, tako da se razlikuje
zaglavlje kolone od samih podataka.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Zaglavlja tabele
Zaglavlje tabele označava zaglavlje kolone ili vrste u tabeli.
<th>
</th>
Zaglavlja ćete postaviti tako što ih smeštate u posebnu vrstu i postavite iznad narednih vrsta (videti primer 4.5).
Primer 4.5 Zaglavlje tabele
<table width=”90%” border=”1” cellspacing=”5” cellpadding=”5”>
<tr>
<th>Država</th>
<th>Pokrajina</th>
<th>Grad</th>
</tr>
<tr>
<td>Srbija</td>
<td>Vojvodina</td>
<td>Novi Sad</td>
</tr>
</table>
Podrazumevano, pretraživači prikazuju zaglavlja tabele masnim slovima. Kao što možete da vidite na slici 4.1, tekst je centriran. Naravno da možete da promenite debljinu slova, njihovu boju, kao i ostale karakteristike. Sve se to radi pomoću CSS-a.
Slika 4.2 Ubacivanje zaglavlja u tabelu
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Zaglavlja tabele možete da koristite i za opis vrsta (videti primer 4.6). U tom slučaju se zaglavlje prikazuje za određenu vrstu (videti sliku 4.3).
Primer 4.6 Zaglavlja tabele za ćelije u tabeli
<table width=”90%” border=”1” cellspacing=”5” cellpadding=”5”>
<tr>
<th>Država</th>
<td>Srbija</td>
</tr>
<tr>
<th>Pokrajina</th>
<td>Vojvodina</td>
</tr>
<th>Grad</th>
<td>Novi Sad</td>
</tr>
</table>
Slika 4.3 Označavanje vrsta pomoću tabela
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Naslov tabele
Naslov tabele se dodaje pomoću elementa caption.
<caption> ... </caption>
Sadržaj naslova treba postaviti između oznake otvaranja i zatvaranja elementa caption. Naslov se postavlja odmah iza oznake otvaranja tabele i kod većine
pretraživača se prikazuje centrirano iznad tabele (videti primer 4.7).
Primer 4.7 Dodavanje naslova u tabelu
<table width=”90%” border=”1” cellspacing=”5” cellpadding=”5”>
<caption> Rezultati pretrage </caption>
<tr>
<th>Država</th>
<td>Srbija</td>
</tr>
<tr>
<th>Pokrajina</th>
<td>Vojvodina</td>
</tr>
<th>Grad</th>
<td>Novi Sad</td>
</tr>
</table>
Slika 4.4 Dodavanje naslova
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Obuhvatanje vrsta
Može se desiti da vam tokom rada bude potrebna tabela u kojoj jedna kolona obuhvata više vrsta u tabeli. Za tu namenu se koristi atribut rovvspan, sa
vrednošću koja se odnosi na broj vrsta koje kolona treba da obuhvati (videti primer 4.9).
Primer 4.8
4.8 Obuhvatanje
Obuhvatonje vrste
dve vrste
pomoću
atributa
rowspan
Primer
pomoću
atributa
rowspan
<table width=”90%” border=”1” cellspacing=”5” cellpadding=”5”>
<caption>Demonstracija obuhvatanja naslova</caption>
<tr>
<th rowspan=”2”>Naslov(obuhvata 2 vrste)</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th>Naslov2</th>
<td>data</td>
<td>data</td>
</tr>
</table>
Na slici 4.5 je prikazano kako ovo izgleda.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Slika 4.5 Obuhvatanje vrsta u zaglavlju tabele
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Obuhvatanje kolona
Kao što možete da obuhvatite više vrsta, tako možete da obuhvatite i više kolona. U tom cilju se koristi atribut colspan, koji se stavlja u ćelije ili zaglavlje tabele
(videti primer 4.11).
Primer 4.9 Obuhvatanje kolona u zaglavlju tabele
<table width=”90%” border=”1” cellspacing=”5” cellpadding=”5”>
<caption>Demonstracija obuhvatanja kolona</caption>
<tr>
<th colspan=2”>Naslov(spaja 2 kolone)</th>
<th>Naslov2</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
Slika 4.6 Obuhvatanje vrsta u zaglavlju tabele
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Slika 4.6 Obuhvatanje dve kolone u zaglavlju tabele
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Kombinacija atributa colspan i rowspan
Naravno da se mešavinom atributa colspan i rowspan mogu napraviti različite tabele. U primeru 4.13 je pokazano kako se kombinuje obuhvatanje vrsta i tabela.
Pnmer4.10 Kombinovanje atributa colspan i rowpan
<table width=”90%” border=”1” cellspacing=”5” cellpadding>
<caption>Kombinacija atributa colspan i rowspan</caption>
<tr>
<th colspan=2” rowspan=”2”>Header</th>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
Slika 4.7 Kombinovanje atributa colspan i rowspan
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje tabela
multimediji i globalni mediji
Skupovi tabela
Bez obzira da li ste student, doktor, naučnik, profesionalni sekretar, ili vladin službenik, u nekom trenutku će vam biti potrebno da informacije postavite
u tabele. Razmislite o različitim trenucima kada na javnim i privatnim sajtovima tabele mogu da postanu potrebne:
•
Rezultati naučnih istraživanja
•
Kalendar događaja
•
Praćenje ocena i prisutnosti
•
Rukovanje poslovima...
Lista može ići dalje, mnogo dalje nego što možete i da zamislite. Sada je lako zaključiti zašto su tabele tako bitne za pravilno rukovanje sadržajem.
Naravno da postoji još jedan način upotrebe tabela, a to je za prikazivanje informacija koje dolaze iz baze podataka. Takve informacije se mogu prikupiti preko
web sajta. Recimo da ste agent za promet nekretnina koji želi da napravi bazu podataka ljudi koji su zainteresovani za kupovinu i prodaju zemlje u vašoj oblasti.
Možete napraviti interaktivnu formu za prikupljanje informacija od posetilaca koji su spremni da je popune. Forma se, zatim, pomoću tehnologije za rad sa
bazama podataka obrađuje na serveru. Posle toga se podaci u obliku tabele vraćaju na web sajt. Naravno da je u tom slučaju potrebna komunikacija formi i
tehnologija na strani servera.
U narednom poglavlju ćete naučiti sve o formama i načinu kako da napravite sjajne interaktivne forme, tako da možete da obogatite doživljaj posetilaca na
sajtu. Naravno, forme će vam pomoći i da dobijete povratnu informaciju.
dipl.ing. Aleksandar Rikalović M.Sc.
Download

Vežba 4