JAVNA USTANOVA SREDNJOKOLSKI CENTAR

JOVAN CVIJI
MODRIA
MATURSKI RAD
IZ PROGRAMIRANJE I PROGRAMSKI JEZICI
TEMA: TABELE U HTML-u





Mentor: Uenik:
Prof. Rajko Miljevi Marijana Koji IV-5
Modria,kolske 2013/2014. Godine
2
SADRAJ
SADRAJ ........................................................................ Error! Bookmark not defined.
UVOD ............................................................................................................................... 3
KAKO RADE HTML TABELE? .................................................................................... 4
ATRIBUTI ....................................................................................................................... 6
TABELE ZA FORMATIRANJE DOKUMENTA .......................................................... 8
irina tabele i polja ........................................................................................................... 9
TABELE ZA PRIKAZ PODATAKA .............................................................................. 9
IRINA TABELE ............................................................................................................ 9
PRIMJER TABELE ....................................................................................................... 10
Izbornici .......................................................................................................................... 12
Primjer 6: .............................................................................................................. 13
OKVIRI .......................................................................................................................... 14
Primjer 7: .............................................................................................................. 15
Primjer 8: .............................................................................................................. 16
ZAKLJUAK ................................................................................................................. 18
LITERATURA ............................................................................................................... 19
STRANA ZA UPIS PODATAKA ................................................................................. 20
ODBRANA MATURSKOG RADA .............................................................................. 21

3
UVOD
U ovom tekstu prvo emo objasniti ta je HTML, zatim prelazimo na tabele i rad
sa tabelama u HTML-u
HTML (HyperText Markup Language) predstavlja, uz kaskadne stilove (CSS),
grafiku i skriptne jezike, osnovnu web tehnologiju za izradu web stranica. Hipertekst je
tekst koji se prikazuje na zaslonu raunara i koji je hipervezom povezan s nekim drugim
tekstom u istom ili nekom drugom dokumentu. Markup jezik nije programski jezik koji
moe izvravati naredbe, nego jezik kojim opisujemo strukturu dokumenta. HTML-om
emo primjerice opisati da naa web stranica sadri naslove teksta, tekstualne odlomke,
slike ili video.
HTML tabele pojavljuju se prvi puta 1996 kao nadogradnja HTML 2.0 standarda,
opuisane u dokumentu RFC 1942 ( ftp://ds.internic.net/rfc/rfc1942.txt ), a 1997 su
ukljuene kao sluebeni dio HTML 3,2 specifikacije ( http://www.w3.org/TR/REC-
html32 ). Zamiljene su kao nain prikazivanja podataka organizovanih u retke i stupce
u HTML dokumentima. Tabele mogu sadravati tekst,brojeve,slike,linkove,forme,pa i
druge tabele. U ovom radu prikazati emo razne mogunosti u upotrebi HTML tabela,
te mogunosti alternative za neka od podruija primjene.







4
KAKO RADE HTML TABELE?

Tabela = dvodimenziona matrica iji se elementi nazivaju elije (engl.cell).
elija moe sadrati razliite informacije:
Brojeve
Tekst
Boje
Liste
Hiperveze
Slike,itd.
Tabela se sastavlja tako to se opisuju redom njeni redovi (engl.row) i sadraj svake
elije u redu. Tabela se opisuje uz pomo sloenog taga table koja moe sadrati vie
atributa:
border(okvir, ram) - koji opisuje irinu okvira tabele;
cellspacing- koji opisuje irinu linije koja razdvaja dve elije;
cellpadding- koji opisuje prostor oko sadraja elije (margine);
width - koji opisuje ukupnu irinu tabele.
U daljem tekstu objasnicemo detaljno sve atribute prema HTML 3.2 specifikaciji
HTML tabele struktura. Tabele se vie ne koriste za izradu strukture web stranice jer
je tu zadau preuzeo css.HTML tabela je upisana izmeu poetne i zavrne oznake
<tabl> elementa. Tablica moe imati eljeni broj redaka a svaki redak upisujemo
izmeu poetne i zavrne oznake <tr> elementa.Svaki redak ima jednaki broj elija koje
omeujemo oznakom elementa <td>...</td>. HTML tabele - osnovni elementi.
Oznaavanje poetka i kraja tabele: <table> ... </table>
Poetak i kraj dijela gdje se nalazi zaglavlje stupaca: <thead> ... </thead>
Poetak i kraj zaglavlja stupaca: <th> ... </th>
HTML tablica definira se izmeu para HTML tagova <TABLE> i </TABLE>.
5
Tablica moe sadrati proizvoljan broj redaka omeenih* <TR> i </TR> tagovima. U
svakom retku nalazi se jednak broj elija omeenih sa <TD> i </TD> (podatkovne
elije) ili <TH> i </TH> (elije zaglavlja). Svaka elija moe sadravati bilo koji
HTML kod koji se moe nalaziti u BODY dijelu HTML dokumenta, ukljuujui I Drugu
tabelu, elije zaglavlja nisu ni po emu razliite od ostalih, na pregledniku je da odlui
da li e ih posebno istaknuti ili ne. Veina grafikih preglednika sadraj elija zaglavlja
prikazuje masnim slovima (bold). Tabela moe sadravati i <CAPTION>
</CAPTION> par tagova, koji omeuje* potpis ili naslov tabele.

Primjer jedostavne tabele:

<TABLE BORDER="1">
<CAPTI ON ALI GN=" bot t om">Pr i mj er 1. </ CAPTI ON>
<TR>
<TH>JMBAG</ TH><TH>Ocj ena pi smenog</ TH><TH>Ocj ena usmenog</ TH>
</ TR>
<TR>
<TD>00303909</ TD><TD>5</ TD><TD>4</ TD>
</ TR>
<TR>
<TD>00123456</ TD><TD>5</ TD><TD>5</ TD>
</ TR>
</ TABLE>

U ovom jedonstavnom primjeru vidimo i upotrebu dva atributa. Atributi su dodatne
kljune rijei koje se navode unutar nekog od HTML tagova, i slue za mijenjanje
osnovnog znaenja taga ili navoenje potrebnih parametara. Kod <TABLE> taga
upotrebljen je BORDER atribut. Ovaj atribut odreuje debljinu ruba oko tabele i izmeu
njenih elija. Ako nije specificiran, tabela se iscrtava bez vidljivih rubova (ekvivalentno
ORDER="0"). Drugi upotrebljen atribut je u <CAPTION> tagu. ALIGN kae da
elimo da se potpis prikazuje ispod tablice. Ako nije naveden, preglednih potpis
ispisuje iznad tabele. Poetak i kraj tijela stranice unutar kojeg se nalazi podatci:
<tbody> ... </tbody>
6
ATRIBUTI

Prema HTML 3.2 specifikaciji, tagovi koji ine tabelu mogu sadravati slijedee
atribute: <TABLE>

ALIGN horizontalna pozicija tabele u odnosu na prozor preglednika. Moe
poprimiti vrijednosti "left", "center" ili "right". Podrazumijevana vrijednost je "left".

WIDTH predloena irina tabele. Ovaj parametar je samo naputak pregledniku
kako bi trebalo iscrtati tabelu. Preglednik ga u odreenim sluajevima moe ignorisati ili ne
potovati. irina moe biti zadana apsolutnom vrijednosu u pikselima (npr. WIDTH=212)
ili relativnom vrijednosu u postotcima irine prozora preglednika, okvira ili elije koja
sadri tabelu (npr. WIDTH="100%"). Ako nije naveden, potrebna irina tabele se
automatski odreuje prema njenom sadraju.

BORDER debljina ruba oko tabele i elija u pikselima. Podrazumijevana
vrijednost je "0".

CELLSPACING razmak izmeu susjednih rubova elija u pikselima.
Podrazumijevana vrijednost je "2".
CELLPADDING razmak izmeu ruba elije i njenog sadraja u pikselima.
Podrazumijevana vrijednost je "1".
<CAPTION>:
ALIGN poloaj potpisa u odnosu na tabelu. Moe poprimiti vrijednosti "top" ili
"bottom". Podrazumijevana vrijednost je "top".
<TR>:
ALIGN vodoravno poravnavanje sadraja elija unutar cijelog reda. Moe
poprimiti vrijednosti "left", "center" ili "right". Podrazumijevana vrijednost je "left".

7
VALIGN okomito poravnavanje sadraja elija unutar cijelog reda. Moe
poprimiti vrijednosti "top", "middle" ili "bottom". Podrazumijevana vrijednost je "top".
<TD>:
NOWRAP atribut bez parametara. Upuuje preglednik da ne prelama tekst
unutar elije, osim u sluaju da se to eksplicitno trai (npr. <BR> ili <P>
tagovima).
ROWSPAN broj redova kroz koji se protee ova elija. Omoguuje
kreiranje nepravilnih tabela. Slijede_i red (ili redovi) treba sadravati jednu eliju manje.
COLSPAN broj stupaca kroz koji se protee ova elija. Omoguuje kreiranje
nepravilnih tabela. Slijedei stupac (ili stupci) treba sadravati jednu eliju manje.
VALIGN okomito poravnavanje sadraja unutar elije. Moe poprimiti
vrijednosti "top", "middle" ili "bottom". Ako nije naveden, koristi se vrijednost VALIGN
atributa za cijeli red.
WIDTH predloena irina elije. Kao i irina cijele tabele, ovo slui samo kao
naputak pregledniku. U pravilu, preglednik potuje zadanu brojku, osim u sluajevima kada
to stvara konflikt sa potrebnim irinama ostalih elija u danom stupcu. irina moe biti
zadana apsolutnom vrijednosu u pikselima (npr. WIDTH=50) ili relativnom vrijednosu u
postotcima irine cijele tabele (npr. WIDTH="30%"). Ako nije naveden, potrebna irina
elije se automatski odreuje prema njenom sadraju.
HEIGHT predloena visina elije. U pravilu, preglednik potuje zadanu brojku,
osim u sluajevima kada to stvara konflikt sa potrebnim irinama ostalih elija u danom
retku. Takoe moe biti zadana u postotcima ili apsolutnom vrijednou u pikselima.
Preglednici poput Microsoft Internet Explorera koristili su i neke dodatne atribute. Neki od
njih su kasnije ukljueni u HTML 4.0 specifikaciju. HTML 4.0 takoe dodaje neke nove
tagove i atribute, uglavnom namjenjene lakem prikazivanju na nevizualnim preglednicima.
Mogue je grupisanje redaka i stupaca tabele koritenjem <THEAD>, <TFOOT>,
<TBODY> i <COLGROUP> tagova. Takoe je dodan <SUMMARY> tag koji moe
sadrati opis sadraja tabele, za preglednike koji nisu u mogunosti iscrtati tabelu. HTML
4.0 uvoenjem stilova (cascading style sheets) insistira na odvajanju informacija o sadraju
dokumenta od onih o formi. U skladu sa tim su mnogi atributi za formatiranje tabela poput
8
ALIGN, VALIGN, BGCOLOR i slinih proglaeni zastarjelima, i preporuuje se koritenje
stilova (CSS) za formatiranje tabela. Ovo su samo neke od najbitnijih promjena, kompletan
opis razlika izmeu HTML 3.2 i HTML 4.0 specifikacija je izvan opsega ovog rada. Sa
izuzetkom CSS-a, noviji preglednici jo uvijek ne implementiraju veinu mogunosti koje
dodaje HTML 4.0

TABELE ZA FORMATIRANJE DOKUMENTA
HTML originalno nije zamiljen kao jezik kojim bi bilo mogue precizno
formatiranje dokumenata. Potreba za takvim mogunostima bila je velika, pa su
kreativni web-dizajneri objeruke doekali pojavu tablica u HTML 3.2 specifikaciji, I
poeli ih koristiti za prelom teksta. Mogunosti upotrebe su brojne, ukljuujui prelom
teksta na dva, tri ili vie stupaca, kreiranje izbornika za navigaciju, crtanje raznovrsnih
rubova i okvira ili rezanje sloenih grafikih elemenata u manje komade kako bi se
smanjila koliina prenesenih podataka.
Pojavom CSS-a, ovakva upotreba tabela je zastarjela, no mnogi dizajneri je jo
uvijek na veliko korite. Razlog tome jeo navika, a i razlike u iscrtavanju izmeu
razliitih preglednika. Veina preglednika tablice prikazuju gotovo identino,a razlike
koje postoje su poznate, kao i naini da ih se izbjegne. CSS je jo uvijek relativno nova
tehnologija, te je potrebno puno vie panje kako bi se dobili dokumenti koji izgledaju
jednako u razliitim preglednicima. Bez obzira na to, poeljno je za potrebe
formatiranja dokumenta koristiti CSS. Vei uloeni trud isplatit e se veim
mogunostima, mnogo lakom kasnijom promjenom formatiranja i boljom
pristupanou za korisnike ne-vizualnih preglednika. Za one koji se ipak odlue
koristiti tablice za formatiranje slijedi nekoliko korisnih savijeta.


9
irina tabele i polja
Ovdje je opet poeljno zadati irinu tabele i polja u postotcima, kako bi korisnici
mogli bez potekoa gledati stranicu u prozorima razliitih irina. Ponekad neki grafiki
element dizajna zahtjeva fiksne dimenzije tablice. Tada je potrebno odrediti dimenzije
tako da stranica stane i na monitore sa najmanjom razluivou. Danas je relativno
sigurno za pretpostaviti da je to 800x600, pa bi shodno tome stranice fiksne irine
trebale biti iroke ne vie od oko 600-700 piksela.

TABELE ZA PRIKAZ PODATAKA
Pri koritenju tabela valja voditi rauna o tome da HTML nije zamiljen kao jezik
za formatiranje teksta. Iako postoje brojni atributi kojima moemo uticati na izgled
tabela, njihovo ponaanje nije strogo definisano, i mogu imati vrlo razliite efekte u
razliitim preglednicima.

IRINA TABELE
Trebalo bi izbjegavati zadavanje vrijednosti za irinu tablice u pikselima. Osim
to postoji mogunost da razliiti preglednici razliito interpretiraju zadanu vrijednost,
moramo voditi rauna i o tome da korisnici gledaju na dokument na ekranima razliitih
razluivosti, i u prozorima razliitih veliina. Zbog toga moe doi do neeljenih pojava,
kao tabela koja po irini ne stane u prozor preglednika pa prisiljava korisnika na
skrolanje. Ukoliko je neophodno zadati irinu tabele, poeljno je napraviti to u
postotcima.


10
PRIMJER TABELE
Poetak i kraj retka tabele: <tr> ... </tr>
Poetak i kraj elije s podatcima: <td> ... </td>
Primjer tabele u HTML-u:

<table>
<thead>
<tr>
<th>Naziv 1 </th>
<th>Naziv 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>elija 1 u 1. retku </td>
<td>elija 2 u 1. retku </td>
</tr>
<tr>
<td>elija 3 u 2. retku </td>
<td>elija 4 u 2. retku </td>
</tr>
</tbody>
</table>


11
Izgled gornjeg primjera na web stranici:
Naziv 1 Naziv 2

elija 1 u 1. retku elija 2 u 1. retku
elija 3 u 2. retku elija 4 u 2. retku

Primjer 1 Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).
Kod Objanjenje Ispis na ekran
<html>
<head><title>Dodavanje tabele
</title></head>
<body>
<table border="1" width="100%">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body></html>
Tabela sa jednim redom i
dvije elije bez teksta.

Primjer 2.Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu). Tekst u prvoj
eliji je jedan a u drugoj broj 2.
Kod Objanjenje Ispis na ekran
<html>
<head><title>Dodavanje
tabele2</title></head>
<body>
<table border="1" width="100%">
<tr>
<td>jedan </td>
<td>2 </td>
</tr>
</table>
</body></html>
Tabela sa jednim redom i
dvije elije bez teksta.
jedan 2
Primjer 3. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).
Kod Objanjenje Ispis na ekran
<html>
<head><title>Dodavanje
tabele3</title></head>
<body>
<table border="1" width="100%">
<tr>
<td>1</td>
<td>2</td>

Svaki red poinje sa TAG-
om (<TR>), a svaka
kolona sa TAG-
om(<TD>).
1 2 3
Druga tabela
1
12
<td>3</td>
</tr>
</table>
druga tabela
<table border="1" width="100%">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
</body></html>
2
3

Primjer 4. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu). Tekst u prvoj
eliji je jedan a u drugoj broj 2
Kod Objanjenje Ispis na ekran
<html>
<head><title>Dodavanje
tabele4</title></head>
<body>
<table border="1">
<tr>
<td>red 1, elija 1</td>
<td>red 1, elija 2</td>
</tr>
<tr>
<td>red 2, elija 1</td>
<td>red 2, elija 2</td>
</tr>
</table>
</body></html>
Tabela sa jednim redom i
dvije elije bez teksta.
Nije navedena irina
tabele zato je iroka
koliko je potrebno za ispis
teksta u tabli.
red 1,
elija 1
red 1,
elija 2
red 2,
elija 1
red 2,
elija 2

Izbornici
Pomou tabela mogue je jednostavno oblikovati navigacijske izbornike. Svako polje
tabele predstavlja jedan "dugme". Velika prednost nad koritenjem slika za "dugmad" je
mogunost promjene teksta bez koritenja nekog od programa za crtanje, te daleko
kraa vremena uitavanja. Koritenjem ONMOUSEOVER atributa moemo
jednostavno promijeniti boju polja preko kojeg korisnik prelazi miem, i tako
signalizirati da se radi o linku. Koritenjem ONCLICK atributa moemo promijeniti
izgled "dugmeta" prilikom klika, i tako stvoriti zgled stisnutog "dugmeta".
13
Primjer 6:

<table width="50%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td bgcolor="#FFFFCC" onMouseOver="this.bgColor =
'#FFCCCC';"
onMouseOut="this.bgColor = '#FFFFCC';">opcija 1</td>
<td bgcolor="#FFFFCC" onMouseOver="this.bgColor =
'#FFCCCC';"
onMouseOut="this.bgColor = '#FFFFCC';">opcija 2</td>
<td bgcolor="#FFFFCC" onMouseOver="this.bgColor =
'#FFCCCC';"
onMouseOut="this.bgColor = '#FFFFCC';">opcija 3</td>
<td bgcolor="#FFFFCC" onMouseOver="this.bgColor =
'#FFCCCC';"
onMouseOut="this.bgColor = '#FFFFCC';">opcija 4</td>
<td bgcolor="#FFFFCC" onMouseOver="this.bgColor =
'#FFCCCC';"
onMouseOut="this.bgColor = '#FFFFCC';">opcija 5</td>
</tr>
</table>
14

Ova tehnika koritena je i za izradu glavnog izbornika ovog dokumenta.



OKVIRI
Preglednici tipi_no iscrtavaju okvir tablice sa "3d" efektom; tablica izgleda kao da
je izdignuta od povrine dokumenta, a sama polja tablice su udubljenja u toj povrini.
Koritenjem ugraenih tabela i CELLSPACING atributa mogue je kreirati raznobojne
okvire, a dodavanjem redaka i stupaca na rubove tablica mogue je ubaciti grafike
elemente kao okvire.
15
Primjer 7:
<table width="100%" border="0" cellpadding="0" cellspacing="0"
background="images/check.gif">
<caption align="bottom">
Iscrtkani okvir postignut koritenjem ugnije_enih tablica.
</caption>
<tr>
<td><table width="100%" border="0" cellspacing="1"
cellpadding="2">
<tr>
<td bgcolor="#FFFFFF">Ime</td>
<td bgcolor="#FFFFFF">Prezime</td>
<td bgcolor="#FFFFFF">JMBG</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Marijana</td>
<td bgcolor="#FFFFFF">Koji</td>
<td bgcolor="#FFFFFF">0907995125000</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Goran</td>
<td bgcolor="#FFFFFF">Koji_</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

16


Primjer 8:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22"><img src="images/ul.gif" width="22"
height="22"></td>
<td background="images/horiz.gif"> --&gt; Moe se postaviti slika</td>
<td width="22"><img src="images/ur.gif" width="22"
height="22"></td>
</tr>
<tr>
<td background="images/vert.gif">&nbsp;</td>
<td><p>Tablica sa grafikim okvirom. Iako je okvir nacrtan,
tablica nije fiksne veliine nego mijenja veliinu zajedno
sa prozorom preglednika.</p></td>
<td background="images/vert.gif">&nbsp;</td>
17
</tr>
<tr>
<td><img src="images/ll.gif" width="22" height="22"></td>
<td background="images/horiz.gif">&nbsp;</td>
<td><img src="images/lr.gif" width="22" height="22"></td>
</tr>
</table>





18
ZAKLJUAK
Tehnike opisane u prolom dijelu dokumenta vrlo su efektne, no za postizanje
istih efekata puno je bolje koristiti stilove. Ne-vizualni preglednici mogu imati puno
problema sa brojnim dodatnim poljima i ugraenim tabela koje ne sadre korisni sadraj
nego samo slue za formatiranje. Uz dobro definiranu logiku strukturu dokumenta,
koritenjem stilova mogue je vrlo jednostavno promijeniti njegov izgled, i to bez
mijenjanja samog dokumenta. S druge strane, tabele su i dalje neizostavne za prikaz
podataka. Kod primjena te vrste treba voditi rauna o raznim vrstama preglednika, i
koristiti atribute i tagove za dodatni opis sadraja (npr. koristiti <TH> umjesto <TD>
za zaglavlje, koristiti <SUMMARY> i <CAPTION> tagove, te ABBR, TITLE i
HEADERS atribute u poljima) kako bi ne-vizualni preglednici to lake prikazali
sadraj tabele.











19
LITERATURA
1. HTML I Web dizajn , Mikro knjiga ,Osborne. Beograd, (2010).
2. DREAMWEAVER MX , Mikro knjiga,Beograd , (2004).
3. RAD SA TABELAMA , Biljana Jovanovi ,Matematiki fakultet,
Univerzitet u Beogradu http://poincare.matf.bg.ac.rs/ (2013).
4. OSNOVE HTML-a , prof. Duko Popovi ,
http://www.osnoveprogramiranja.com/

5. HTML PRIRUNIK I ZADACI , http://www.znanje.org/
20
STRANA ZA UPIS PODATAKA
















21
ODBRANA MATURSKOG RADA

Ocjena maturskog rada: ( ),____________________________________________.

Pitanja: 1.____________________________________________________________.

2.____________________________________________________________.

3.____________________________________________________________.




Ocjena na odbrani rada: ( ),___________________________________________.


Komisija: ____________________________________________________________.
Predsjednik


____________________________________________________________.
Ispitiva


____________________________________________________________.
lan