Tema 4. | IZRADA TABLICE |
a) Definiranje dimenzija tablice
Dimenzija tablice predstavljena je brojem kolona (okomito) i brojem redova (vodoravno).
Svako pojedino polje unutar tablice zove se čelija, unutar kojega se može upisati neki tekst, postaviti slika ili kombinirati oboje.
U svakoj tablici može se podesiti debljina njenog okvira (BORDER), te širina i visina tablice u odnosu na veličinu ekrana (WIDTH/HEIGHT) kao i druge opcije.
Glede formatiranja teksta unutar čelija, vrijede ista pravila kao i za uobičajeno formatiranje teksta.
HTML naredba Objašnjenje Rezultat u browseru <TABLE border=1>
<TR>
<TD>
proba
</TD>
</TR>
</TABLE>oznaka početka tablice
početak prvog reda u tablici
početak prve kolone u tablici
tekst koji će se vidjeti u čeliji
kraj prve kolone u tablici
kraj prvog reda u tablici
oznaka kraja tablice
proba <TABLE border=5>
<TR>
<TD>
kolona1
</TD>
<TD>
kolona2
</TD>
<TD>
kolona3
</TD>
</TR>
</TABLE>Primjer tablice s jednim redom,
tri kolone i okvirom debljine 5 pix.
Prvo definirate red sa <TR>
a zatim naredbama <TD>
ubacujete jednu po jednu kolonu
Svaki <TR> mora imati svoj </TR>
i svaki <TD> svoj </TD>
kolona1 kolona2 kolona3 <TABLE border=1>
<TR>
<TD>
red1-kolona1
</TD>
<TD>
red1-kolona2
</TD>
</TR>
<TR>
<TD>
red2-kolona1
</TD>
<TD>
red2-kolona2
</TD>
</TR>
<TR>
<TD>
red3-kolona1
</TD>
<TD>
red3-kolona2
</TD>
</TR>
</TABLE>
Primjer tablice sa tri reda,
dvije kolone i okvirom debljine 1 pix.
Naravno, za izradu tablica danas postoje
mnogi pomoćni alati pa nema potrebe
da se ovako "ručno" patimo sa izradom!
Ovaj primjer treba samo poslužiti
da bi shvatili način na koji se tablica
generira...
red1-kolona1 red1-kolona2 red2-kolona1 red2-kolona2 red3-kolona1 red3-kolona2 U prilogu se nalazi datoteka ds-vje4a.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.
b) Boja podloge u tablici (TABLE BGCOLOR="...")
U svakoj tablici može se podesiti boja podloge cijele tablice ili samo njenih pojedinih čelija (BGCOLOR).
HTML naredba Objašnjenje Rezultat u browseru <TABLE border=1 bgcolor="yellow">
<TR>
<TD>
red1-kolona1
</TD>
<TD>
red1-kolona2
</TD>
</TR>
<TR>
<TD>
red2-kolona1
</TD>
<TD bgcolor="aqua">
red2-kolona2
</TD>
</TR>
</TABLE>
primjer tablice sa dva reda,
dvije kolone i okvirom debljine 1 pix.
<TABLE ... bgcolor="yellow">
postavlja žutu podlogu cijele tablice
<TD bgcolor="aqua">
postavlja plavu podlogu
samo u toj čeliji!
red1-kolona1 red1-kolona2 red2-kolona1 red2-kolona2 U prilogu se nalazi datoteka ds-vje4b.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.
c) Slika kao podloga u tablici (TABLE BACKGROUND="...")
Za podlogu (pozadinu) tablice ili njenih čelija umjesto boje (BGCOLOR) možemo postaviti i sliku (BACKGROUND).
HTML naredba Objašnjenje Rezultat u browseru <TABLE border=5 BACKGROUND="ds-bkgr3.gif">
<TR>
<TD>
kolona1
</TD>
<TD>
kolona2
</TD>
<TD>
kolona3
</TD>
</TR>
</TABLE>Primjer tablice s jednim redom,
tri kolone, okvirom debljine 5 pix.
i slikom u pozadini.
Sliku pozadine cijele tablice
učitavamo opcijom
<TABLE BACKGROUND="ds-bkgr3.gif">
kolona1
kolona2
kolona3<TABLE border=5 BACKGROUND="ds-bkgr3.gif">
<TR>
<TD>
kolona1
</TD>
<TD>
kolona2
</TD>
<TD BACKGROUND="ds-bkgr2.gif">
kolona3
</TD>
</TR>
</TABLE>Primjer sa slikom u pozadini,
s tim što je u zadnjoj čeliji definirana
posebna slika za pozadini
Sliku pozadine određene čelije
učitavamo opcijom
<TD BACKGROUND="ds-bkgr3.gif">
kolona1
kolona2
kolona3U prilogu se nalazi datoteka ds-vje4c.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.
d) Ubacivanje slike u tablicu
Polja tablice mogu osim teksta sadržavati i druge objekte, pa tako i slike.
Treba razlikovati slike koje koristimo za podlogu/pozadinu u tablici od onih koje učitavamo u polje tablice!
Princip učitavanja slike u tablicu ne razlikuje se od uobičajenog postupka za učitavanje slike.
HTML naredba Objašnjenje Rezultat u browseru <TABLE border=5>
<TR>
<TD>
<IMG SRC="ds-img01.jpg">
</TD>
<TD>
...kolona2...<BR>
...kolona2...
</TD>
<TD ALIGN="center">
kolona3<BR>
<IMG SRC="ds-img02.jpg">
kolona3<BR>
kolona3
</TD>
</TR>
</TABLE>Primjer tablice sa jednim redom,
tri kolone i okvirom debljine 5 pix.
U prvu i treću kolonu (čeliju)
učitali smo slike, koristeći opciju
... <IMG SRC="ds-img01.jpg">...
unutar tih čelija.
U trećoj koloni (čeliji)
kombinirali smo tekst i sliku,
s tim da smo sve to centrirali sa
<TD ALIGN="center">
...kolona2...
...kolona2...kolona3
kolona3
kolona3U prilogu se nalazi datoteka ds-vje4d.htm koja prikazuje uporabu ovih naredbi u praksi.
Njen izvorni kod slobodno možete mijenjati u cilju vježbe.
A sada, vrijeme je za petu temu: IZRADA LISTA (POPISA)
Obrada i web: damir.tomsicbj.hinet.hr