HTML Tabele - Lekcija 5

Hajde da se malo igramo... isprobaćemo nekoliko stvari pa da vidimo šta će se desiti.

Evo jedne male UNORDERED liste:

Sastojci za pitu od jabuka

To nije loše, ali šta ako malo pomerimo celu ovu listu...

Sastojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet

Zašto smo to uradili? Pa, da bismo mogli da ubacimo i sliku pite od jabuka!

Sastojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet
Tako nešto se najlakše radi pomoću tabela.

Predlog: dok učite, ili proučavate neku tabelu, bilo bi dobro da ivice učinite vidljivima (tj. da atribut BORDER bude 1 ili više!).

Satojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet
Krenimo korak po korak. Verujte, nije to ništa komplikovano.

Počnimo od našeg Pere.

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

Pera

Zamenimo Peru jednom UNORDERED listom.

<TABLE BORDER=3>
<TR>

<TD>
Satojci za pitu od jabuka
<UL>
<LI>Jabuke
<LI>Brašno
<LI>Šećer
<LI>Cimet
</UL>
</TD>

</TR>
</TABLE>

Satojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet
Zapamtite: ukoliko nije rečeno drugačije, tabela će biti baš onolika kolika je neophodna da bude (ni manja, ni veća).

Sledeći korak: proširićemo tabelu do pune širine prozora browsera.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD>
Satojci za pitu od jabuka
<UL>
<LI>Jabuke
<LI>Brašno
<LI>Šećer
<LI>Cimet
</UL>
</TD>

</TR>
</TABLE>

Satojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet
Interesantno, zar ne?!

Sada nam treba i druga ćelija. Uzmimo da je nova (leva) ćelija malo manja od stare (desne) ćelije.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD WIDTH=40%></TD>

<TD WIDTH=60%>
Satojci za pitu od jabuka
<UL>
<LI>Jabuke
<LI>Brašno
<LI>Šećer
<LI>Cimet
</UL>
</TD>

</TR>
</TABLE>

Satojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet

Sada snimite sliku applepie.gif u Vaš radni folder (pomoć: kliknite desnim tasterom miša na ovaj link, pa izaberite Save link as.../Save target as..., ili nešto slično).
Dalje, ubacite tu sliku u prvu (levu) ćeliju.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Satojci za pitu od jabuka
<UL>
<LI>Jabuke
<LI>Brašno
<LI>Šećer
<LI>Cimet
</UL>
</TD>

</TR>
</TABLE>

Satojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet

Pita nam je sada otišla malo suviše levo. Pomerimo je desno, i isključimo ivice tabele.

<TABLE BORDER=0 WIDTH=100%>
<TR>

<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Satojci za pitu od jabuka
<UL>
<LI>Jabuke
<LI>Brašno
<LI>Šećer
<LI>Cimet
</UL>
</TD>

</TR>
</TABLE>

Satojci za pitu od jabuka
  • Jabuke
  • Brašno
  • Šećer
  • Cimet
Bravo!

<--Lekcija 4        Lekcija 6-->

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