TABLICA 2

HTML BOOK

TABLICE 2

Često je potrebno da se pojedina polja tablice protežu duž više redova ili stupaca tablice. Ovo se može postići pomoću atributa colspan i rowspan koji se ubacuju u <td> ili <th> tag onog polja koje želimo posebno formatirati. Vrijednost ovih atributa zadaje se brojem stupaca ili redova tablice duž kojih se treba prostirati dano polje. U slijedećem primjeru izrade rasporeda sati objašnjena je upotreba ovih atributa:

Dani u nedjelji :

ponedjeljak utorak srijeda četvrtak petak

s
a
t
i
1. francuski programiranje tjelesni kemija francuski

2. matematika francuski tjelesni kemija francuski

3. tjelesni matematika programiranje biologija engleski

4. tjelesni matematika fizika informatika engleski

5. fizika razredni geografija informatika matematika

HTML kod rasporeda sati izgleda ovako (u kojem smo radi preglednosti izostavili tag <font>, a koji se mora staviti u svako polje tabele posebno kako bi i Netscape Navigator prikazao tekst u odgovarajućem fontu) :

<table border="2" width="100%">
<tr>
    <th rowspan="2" colspan="2"><img src="space.gif"></th>
    <th colspan="5"> Dani u nedjelji :</th>
</tr>
<tr>
    <th width="20%">ponedjeljak</th>
    <th width="20%">utorak</th>
    <th width="20%">srijeda</th>
    <th width="20%">četvrtak</th>
    <th width="20%">petak</th>
</tr>
<tr>
    <th rowspan="5"><br><br>s<p>a<p>t<p>i<p></th>
    <th>1.</th>
    <td>francuski</td>
    <td>programiranje</td>
    <td>tjelesni</td>
    <td>kemija</td>
    <td>francuski</td>
</tr>
<tr>
    <th>2.</th>
    <td>matematika</td>
    <td>francuski</td>
    <td>tjelesni</td>
    <td>kemija</td>
    <td>francuski</td>
</tr>
<tr>
    <th>3.</th>
    <td>tjelesni</td>
    <td>matematika</td>
    <td>programiranje</td>
    <td>biologija</td>
    <td>engleski</td>
</tr>
<tr> 
    <th>4.</th>
    <td>tjelesni</td>
    <td>matematika</td>
    <td>fizika</td>
    <td>informatika</td>
    <td>engleski</td>
</tr>
<tr>
    <th>5.</th>
    <td>fizika</td>
    <td>razredni</td>
    <td>geografija</td>
    <td>informatika</td>
    <td>matematika</td>
</tr>
</table>

Napomena:

U prvo polje ove tablice stavljena je jednu providna gif slika pod nazivom space.gif. Ovo je potrebno jer svako polje tablice mora imati neki sadržaj, inače je browser neće prikazati.

Ovaj gif fajl kopirajmo na hard disk i kasnije ga možemo upotrebljavati na novim HTML stranicama. Desnim klikom na ovaj kvadrat:

dobijemo pop-up meni iz kojeg izabiremo Save Picture as:

Cijela tablica kao i svako polje posebno mogu imati različitu boju pozadine od ostatka stranice. Ovo se postiže umetanjem atributa bgcolor u slijedeće tagove: <table>, <td> ili <th>. Vrijednost se zadaje heksadecimalnim kodom boje ili njenim imenom, isto kao i kod boje pozadine stranice u <body> tagu.

U slijedećem primjeru pogledajmo "obojeni" raspored sati:

<table border="2" width="95%" bgcolor="#ffffff"> <tr> <th rowspan="2" colspan="2" bgcolor="#b0e0e6"><img src="space.gif" width="10" height="10"></th> <th colspan="5" bgcolor="#ffff00"> Dani u nedjelji :</th> </tr> <tr> <th width="20%" bgcolor="#9acd32">ponedjeljak</th> <th width="20%" bgcolor="#9acd32">utorak</th> <th width="20%" bgcolor="#9acd32">srijeda</th> <th width="20%" bgcolor="#9acd32">četvrtak</th> <th width="20%" bgcolor="#9acd32">petak</th> </tr> <tr> <th rowspan="5" bgcolor="#ffff00"> <p>s<p>a<p>t<p>i<p> </th> <th bgcolor="#9acd32">1.</th> <td bgcolor="#b0e0e6">francuski</td> <td bgcolor="#b0e0e6">programiranje</td> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">kemija</td> <td bgcolor="#b0e0e6">francuski</td> </tr> <tr> <th bgcolor="#9acd32">2.</th> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">francuski</td> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">kemija</td> <td bgcolor="#b0e0e6">francuski</td> </tr> <tr> <th bgcolor="#9acd32">3.</th> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">programiranje</td> <td bgcolor="#b0e0e6">biologija</td> <td bgcolor="#b0e0e6">engleski</td> </tr> <tr> <th bgcolor="#9acd32">4.</th> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">fizika</td> <td bgcolor="#b0e0e6">informatika</td> <td bgcolor="#b0e0e6">engleski</td> </tr> <tr> <th bgcolor="#9acd32">5.</th> <td bgcolor="#b0e0e6">fizika</td> <td bgcolor="#b0e0e6">razredni</td> <td bgcolor="#b0e0e6">geografija</td> <td bgcolor="#b0e0e6">informatika</td> <td bgcolor="#b0e0e6">matematika</td> </tr> </table>

HTML kod ovog "obojenog" rasporeda sati izgleda ovako:

<table border="2" width="100%" bgcolor="#ffffff">
<tr>
    <th rowspan="2" colspan="2" bgcolor="#b0e0e6"><img src="space.gif"></th>
    <th colspan="5" bgcolor="#ffff00"> Dani u nedjelji :</th>
</tr>
<tr>
    <th width="20%" bgcolor="#9acd32">ponedjeljak</th>
    <th width="20%" bgcolor="#9acd32">utorak</th>
    <th width="20%" bgcolor="#9acd32">srijeda</th>
    <th width="20%" bgcolor="#9acd32">četvrtak</th>
    <th width="20%" bgcolor="#9acd32">petak</th>
</tr>
<tr>
    <th rowspan="5" bgcolor="#ffff00">s<p>a<p>t<p>i<p></th>
    <th bgcolor="#9acd32">1.</th>
    <td bgcolor="#b0e0e6">francuski</td>
    <td bgcolor="#b0e0e6">programiranje</td>
    <td bgcolor="#b0e0e6">tjelesni</td>
    <td bgcolor="#b0e0e6">kemija</td>
    <td bgcolor="#b0e0e6">francuski</td>
</tr>
<tr>
    <th bgcolor="#9acd32">2.</th>
    <td bgcolor="#b0e0e6">matematika</td>
    <td bgcolor="#b0e0e6">francuski</td>
    <td bgcolor="#b0e0e6">tjelesni</td>
    <td bgcolor="#b0e0e6">kemija</td>
    <td bgcolor="#b0e0e6">francuski</td>
</tr>
<tr> 
    <th bgcolor="#9acd32">3.</th>
    <td bgcolor="#b0e0e6">tjelesni</td>
    <td bgcolor="#b0e0e6">matematika</td>
    <td bgcolor="#b0e0e6">programiranje</td>
    <td bgcolor="#b0e0e6">biologija</td>
    <td bgcolor="#b0e0e6">engleski</td>
</tr>
<tr>
    <th bgcolor="#9acd32">4.</th>
    <td bgcolor="#b0e0e6">tjelesni</td>
    <td bgcolor="#b0e0e6">matematika</td>
    <td bgcolor="#b0e0e6">fizika</td>
    <td bgcolor="#b0e0e6">informatika</td>
    <td bgcolor="#b0e0e6">engleski</td>
</tr>
<tr>
    <th bgcolor="#9acd32">5.</th>
    <td bgcolor="#b0e0e6">fizika</td>
    <td bgcolor="#b0e0e6">razredni</td>
    <td bgcolor="#b0e0e6">geografija</td>
    <td bgcolor="#b0e0e6">informatika</td>
    <td bgcolor="#b0e0e6">matematika</td>
</tr>
</table>

Kao što se iz ovog primjera vidi atribut bgcolor koji zadajemo u <th> ili <td> tagu "pregazit" će onu boju koju ste zadali u <table> tagu. U <table> tagu zadali smo bijelu boju pozadine koja se vidi samo na ivicama tabele (ako koristimo Internet Explorer) jer smo u svakom pojedinačnom polju zadali posebnu boju pozadine bgcolor atributom.

Ako nismo zadovoljni sivim okvirom tabele njegovu boju možemo promijeniti pomoću bordercolor atributa u <table> tagu. U slijedećem primjeru raspored sati ima crni okvir:

		Dani u nedjelji :
		ponedjeljak	utorak	srijeda	četvrtak	petak
s a t i	1.	francuski	programiranje	tjelesni	kemija	francuski
	2.	matematika	tjelesni	kemija	francuski	francuski
	3.	tjelesni	matematika	programiranje	biologija	engleski
	4.	tjelesni	matematika	fizika	informatika	engleski
	5.	fizika	razredni	geografija	informatika	matematika

što smo postigli na slijedeći način:

<table border="2" width="100%" bgcolor="#ffffff" bordercolor="#000000"> ...

Uvod	Boje	Uređivanje teksta 1	Uređivanje teksta 2	Liste
Linkovi	Grafika	Tablice 1		Marquee
Početak		Home		Kraj