HTML BOOK |
TABLICE 2 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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>
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:
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:
što smo postigli na slijedeći način: <table border="2" width="100%" bgcolor="#ffffff" bordercolor="#000000"> ... |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|