HTML-osnove

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:

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 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. matematikatjelesni 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"> ...