HTML Tutor
Lekcija 1
Lekcija 2
Lekcija 3
Lekcija 4
Lekcija 5
   Lekcija 6
Lekcija 7
iDragstor Lab
  
Lekcija 6 - Tabele

Tabele su vam prijatelji
Iako na prvi pogled kompleksne, jednom kada savladate osnove tabela imace vise koristi i kontrole u izradi stranica. Pomocu tabela mozete bolje da organizujete prostor i grupisete elemente na ekranu.
Osnovni elementi
Prvi redCelija1Celija2Celija3
Drugi redCelija1Celija2Celija3
Svaka HTML tabela sadrzi celije i redove (table cell <TD> & table row <TR>). Celija je osnovni deo tabele, horizontalni skup celija cini red. Nas primer ima 2 reda i u svakom redu po cetiri celije. Skup redova cini tabelu. Pa da predjemo na izradu tabela:

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

U ovom primeru smo napravili tabelu koja ima jedan red i jednu celiju. <TD>Pocetak-teg i </TD>kraj-teg su smesteni unutar TR teg-ova, a <TR>Pocetak-teg i </TR>kraj-teg su unutar TABLE teg-ova. Evo jos jednog primera:

<TABLE>
<TR>
<TD> Celija1 </TD>
<TD> Celija2 </TD>
</TR>
<TR>
<TD> Celija1 </TD>
<TD> Celija2 </TD>
</TR>
</TABLE>

U ovom primeru smo napravili tabelu sa dva reda i u svakom od redova imamo dve celije.

Atributi za pozicioniranje teksta
Za pozicioniranje teksta u tabeli koriste se dva atributa ALIGN (horizontalno) i VALIGN (verticalno) a vrednosti za atribute su
ALIGN=left, right ili center (levo, sredina, desno)
VALIGN=top, middle, bottom (gore, sredina, dole)
Pogledajte sledeci primer:

ALIGN     VALIGN     
align=leftvalign=top
align=centervalign=middle
align=rightvalign=bottom


Svaka celija moze imati samo jedan ALIGN i jedan VALIGN atribut.
<TD ALIGN=left VALIGN=top>
U ovom primeru smo pozicionirali tekst u gornjem levom uglu.

Stigli ste na kraj prve lekcije o tabelama. Na kraju ove stranice se nalazi kod za zuto-crvenu tabelu iz ove lekcije. Bilo dobro da uradite nekoliko vezbi samostalno u laboratoriji menjajuci poziciju i vrednosti teksta. Kada zavrsite bicete spremni za poslednju lekciju.

<TABLE border=1 cellspacing=5 cellspadding=2 align=center bgcolor=red>
<TR>
<TD><b>Prvi red</b></TD>
<TD bgcolor=yellow>Celija1</TD>
<TD bgcolor=yellow>Celija2</TD>
<TD bgcolor=yellow>Celija3</TD>
</TR>
<TR>
<TD><b>Drugi red</b></TD>
<TD bgcolor=yellow>Celija1</TD>
<TD bgcolor=yellow>Celija2</TD>
<TD bgcolor=yellow>Celija3</TD>
</TR>
</TABLE>


Predhodna Lekcija Pocetak Sledeca Lekcija