TABELE 2
Cesto se desava da pojedine celije tabele treba da se protezu duz vise redova ili kolona tabele.
Ovo se moze postici pomocu atributa colspan i rowspan koji se ubacuju u <td> ili <th> tag one celije koju zelimo posebno da formatiramo.
Vrednost ovih atributa se zadaje brojem kolona ili redova tabele duz kojih treba da se prostire data celija.
Mislim da ce sledeci primer u potpunosti razjasniti upotrebu ovih atributa:
 | Dani u nedelji : |
|---|
| ponedeljak | utorak |
sreda | cetvrtak | petak |
|---|
| c a s o v i |
1. | srpski | istorija | fizicko | hemija | srpski |
|---|
| 2. | matematika | srpski | fizicko | hemija | srpski |
|---|
| 3. | fizicko | matematika | istorija | biologija | engleski |
|---|
| 4. | fizicko | matematika | fizika | informatika | engleski |
|---|
| 5. | fizika | razredni | geografija | informatika | matematika |
|---|
A evo i originalnog HTML koda ovog rasporeda casova (u kojem sam radi preglednosti izostavio tag <font>, a koji se mora staviti u svaku celiju tabele posebno
kako bi i Netscape Navigator prikazao tekst u odgovarajucem fontu) :
<![CDATA[
<TABLE BORDER="2" WIDTH="100%">
<TR>
<TH ROWSPAN="2" COLSPAN="2"><IMG SRC="space.gif"></TH>
<TH COLSPAN="5"> Dani u nedelji :</TH>
</TR>
<TR>
<TH WIDTH="20%">ponedeljak</TH>
<TH WIDTH="20%">utorak</TH>
<TH WIDTH="20%">sreda</TH>
<TH WIDTH="20%">cetvrtak</TH>
<TH WIDTH="20%">petak</TH>
</TR>
<TR>
<TH ROWSPAN="5">c<P>a<P>s<P>o<P>v<P>i</TH>
<TH>1.</TH>
<TD>srpski</TD>
<TD>istorija</TD>
<TD>fizicko</TD>
<TD>hemija</TD>
<TD>srpski</TD>
</TR>
<TR>
<TH>2.</TH>
<TD>matematika</TD>
<TD>srpski</TD>
<TD>fizicko</TD>
<TD>hemija</TD>
<TD>srpski</TD>
</TR>
<TR>
<TH>3.</TH>
<TD>fizicko</TD>
<TD>matematika</TD>
<TD>istorija</TD>
<TD>biologija</TD>
<TD>engleski</TD>
</TR>
<TR>
<TH>4.</TH>
<TD>fizicko</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>
]]>
Priznajem da je malo zapetljano ali ako pazljivo proucite ovaj primer shvaticete primenu ova dva atributa.
- paznja !
- U prvu celiju ove tabele sam stavio jednu providnu gif sliku pod nazivom space.gif.
Ovo je neophodno stoga sto svaka celija tabele mora imati neki sadrzaj, inace je vas browser nece prikazati.
I vi mozete prekopirati ovaj gif fajl na vas hard disk i kasnije ga upotrebljavati na vasim HTML stranicama.
Desnim klikom na ovaj kvadratic:
dobicete prirucni (popup) meni iz kojeg treba da odaberete Save Picture as:
Ono sto je posebno zanimljivo kod tabela je to sto cela tabela kao i svaka celija posebno moze da ima razlicitu boju pozadine
od ostatka vase stranice. Ovo se postize umetanjem atributa bgcolor u sledece tagove: <table>, <td> ili <th>.
Vrednost se zadaje heksadecimalnim kodom boje ili njenim imenom, isto kao i kod boje pozadine stranice u <body> tagu.
U sledecem primeru sam malo obojio nas raspored casova:
| Dani u nedelji : |
|---|
| ponedeljak | utorak |
sreda | cetvrtak | petak |
|---|
| c a s o v i |
1. | srpski | istorija | fizicko | hemija | srpski |
|---|
| 2. | matematika | fizicko | hemija | srpski | srpski |
|---|
| 3. | fizicko | matematika | istorija | biologija | engleski |
|---|
| 4. | fizicko | matematika | fizika | informatika | engleski |
|---|
| 5. | fizika | razredni | geografija | informatika | matematika |
|---|
HTML kod ovog "obojadisanog" rasporeda casova glasi:
<![CDATA[
<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 nedelji :</TH>
</TR>
<TR>
<TH WIDTH="20%" BGCOLOR="#9acd32">ponedeljak</TH>
<TH WIDTH="20%" BGCOLOR="#9acd32">utorak</TH>
<TH WIDTH="20%" BGCOLOR="#9acd32">sreda</TH>
<TH WIDTH="20%" BGCOLOR="#9acd32">cetvrtak</TH>
<TH WIDTH="20%" BGCOLOR="#9acd32">petak</TH>
</TR>
<TR>
<TH ROWSPAN="5" BGCOLOR="#ffff00">c<P>a<P>s<P>o<P>v<P>i</TH>
<TH BGCOLOR="#9acd32">1.</TH>
<TD BGCOLOR="#b0e0e6">srpski</TD>
<TD BGCOLOR="#b0e0e6">istorija</TD>
<TD BGCOLOR="#b0e0e6">fizicko</TD>
<TD BGCOLOR="#b0e0e6">hemija</TD>
<TD BGCOLOR="#b0e0e6">srpski</TD>
</TR>
<TR>
<TH BGCOLOR="#9acd32">2.</TH>
<TD BGCOLOR="#b0e0e6">matematika</TD>
<TD BGCOLOR="#b0e0e6">srpski</TD>
<TD BGCOLOR="#b0e0e6">fizicko</TD>
<TD BGCOLOR="#b0e0e6">hemija</TD>
<TD BGCOLOR="#b0e0e6">srpski</TD>
</TR>
<TR>
<TH BGCOLOR="#9acd32">3.</TH>
<TD BGCOLOR="#b0e0e6">fizicko</TD>
<TD BGCOLOR="#b0e0e6">matematika</TD>
<TD BGCOLOR="#b0e0e6">istorija</TD>
<TD BGCOLOR="#b0e0e6">biologija</TD>
<TD BGCOLOR="#b0e0e6">engleski</TD>
</TR>
<TR>
<TH BGCOLOR="#9acd32">4.</TH>
<TD BGCOLOR="#b0e0e6">fizicko</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 sto se iz ovog primera vidi atribut bgcolor koji zadate u <th> ili <td> tagu ce "pregaziti" onu boju koju ste zadali u <table> tagu.
Ja sam u <table> tagu zadao belu boju pozadine koja se vidi samo na ivicama tabele (ako koristite Internet Explorer) jer sam u svakoj pojedinacnoj celiji zadao posebnu boju pozadine bgcolor atributom.
Ako niste zadovoljni sivim okvirom tabele njegovu boju mozete promeniti pomocu bordercolor atributa u vasem <table> tagu. U sledecem primeru sam nasem rasporedu casova dodelio crni okvir:
| Dani u nedelji : |
|---|
| ponedeljak | utorak |
sreda | cetvrtak | petak |
|---|
| c a s o v i |
1. | srpski | istorija | fizicko | hemija | srpski |
|---|
| 2. | matematika | fizicko | hemija | srpski | srpski |
|---|
| 3. | fizicko | matematika | istorija | biologija | engleski |
|---|
| 4. | fizicko | matematika | fizika | informatika | engleski |
|---|
| 5. | fizika | razredni | geografija | informatika | matematika |
|---|
sto sam postigao na sledeci nacin:
<![CDATA[
<TABLE BORDER="2" WIDTH="100%" BGCOLOR="#ffffff" BORDERCOLOR="#000000"> ...
]]>
Sledece poglavlje govori o <marquee> i <blink> tagovima. Sta rece?!?
