HTML Tabele - Lekcija 6

Da li je moguće napraviti tabelu u tabeli?
Sad ćemo da probamo. Počnimo od Pere.

<TABLE BORDER=3>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>

Pera

Hajde da malo povećamo tabelu.

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>

Pera

Zamenimo Peru novom, malom tabelom (u kojoj će opet biti... Pera!).

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

<TABLE BORDER=3>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Pera
Kako Vam se čini ovo!

Centriranje tabele je takođe prosto k'o pasulj.

<CENTER>
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

<TABLE BORDER=3>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>
</CENTER>

Pera
Postoje situacije u kojima tabele pomažu da se prevaziđe jedan čest problem.
Na primer, imate ideju za jednu veoma dobru animiranu .gif sliku. Međutim, slika koju želite da koristite je onako oho-ho velika (u smislu kB). Pošto znate da je animirana slika u osnovi serija slika koje idu jedna za drugom, shvatate da Vaši posetioci neće biti baš presrećni da čekaju da se učita Vaša gigantska slika od, recimo, 700 kB. Ne samo to... njihovi browseri će se ugušiti pokušavajući da prikažu tu sličicu. Postoji li rešenje? A-ha (ovo je potvrdni odgovor, a ne švedska /norveška?/ pop-grupa iz 80-ih). Isecite sliku i prikažite je pomoću tabele!

Sledi primer:

AMD vs. Intel?
Artwork by Boris Vallejo
Pogledajmo kako bi ova ista slika (zapravo više slika) izgledala ako bi atribut CELLSPACING iznosio 3.

AMD vs. Intel?

Kao što se vidi, jedino što je ovde animirano jesu oči zmaja.

Pogledajmo HTML kôd za gornju tabelu (uzgred, tag CAPTION možete slobodno da izostavite - to neće uticati na svu ovu zbrku).

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<CAPTION ALIGN=top><FONT SIZE=6><B><I>AMD vs. Intel?</I></B></FONT></CAPTION>

<TR>
<TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>

</TABLE>

Evo skice izgleda gornje tabele.

dragon4.gif
dragon3.gif 		dragon5.gif
anidrag.gif
dragon2.gif
 

* PITANJE: Zašto se u mojim tabelama (ili između slika) javljaju razmaci? Kako da potpuno spojim sliku A i sliku B?

Odgovor: Ovo je čest problem. Najgore od svega je to što se ovakvi problemi javljaju samo kod nekih browsera. Nekoliko mogućih uzroka i njihovih lekova nalaze se ovde.

Pa, ovo bi bilo gotovo sve o HTML Tabelama. Još nekoliko interesantnih primera nalazi se ovde. Probajte da ih samostalno uradite.

<--Lekcija 5        Lekcija 7-->

Sadržaj Lekcije
Uvod - 1 - 2 - 3 - 4 - 5 - 6 - 7		 Indeks "Barebones"
HTML vodič
Z o N i . W e b !