HTML Tabele - Lekcija 3

Vratimo se na Peru...

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Pera</TD>
</TR>
</TABLE>

Pera

Dalje, uklonimo atribute radi jasnosti. Mi znamo šta će se desiti, jer poznajemo default vrednosti. Uzgred, podsetiću ovo još jedanput: TAG govori browseru šta da radi; ATRIBUT nekog taga govori browseru kako da to uradi.

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

Pera

Povećajmo tabelu malo.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>

Pera

Perin prijatelj Laza se vratio i sada zahteva svoju ćeliju.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Pera</TD>
<TD>Laza</TD>
</TR>
</TABLE>

Pera Laza

Ako drugačije ne naglasimo, sve ćelije tabele biće različite veličine (obično!). Zato je dobro rešenje zadati dimenzije svake ćelije. Vodite računa sa ovim; ukoliko ne izračunate sve dobro, ono što će posetioci Vaše web strane videti, veoma će se razlikovati od onoga što ste zamislili!

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Pera</TD>
<TD WIDTH=150>Laza</TD>
</TR>
</TABLE>

Pera Laza

Atribut WIDTH možemo zadati i u procentima.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=50%>Pera</TD>
<TD WIDTH=50%>Laza</TD>
</TR>
</TABLE>

Pera Laza
 

* PITANJE: Napravio sam tabelu određenih dimenzija, ali ona više ne izgleda ispravno. Ili, izgleda dobro sa Browser-om AAA, a sasvim drugačije sa Browser-om BBB.

ODGOVOR: Potpuno preciziranje dimenzija tabele može biti veoma komplikovano. Često browseri ne prikazuju tabele onako kao smo ih zamislili (pa čak ni onako kako bi trebalo). Ovo se najlakše prevazilazi fleksibilnijim tabelama. Jednostavno rečeno, napravite tabelu, takvu da male razlike u različitim browserima, ne utiču bitno na kompletnu tabelu. Sve to ide sa iskustvom.

Ja mislim da je Pera zaslužio veću ćeliju, jer je duže sa nama.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=80%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
</TR>
</TABLE>

Pera Laza

Evo i Mike; naravno, i on želi svoju ćeliju. Mi moramo da odlučimo koliku ćeliju da mu damo. Mislim da je 20% dovoljno. Dakle...

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
<TD WIDTH=20%>Mika</TD>
</TR>
</TABLE>

Pera Laza Mika

Tri ortaka od preko puta ulice vide šta se dešava, pa i oni žele da uskoče u tabelu. Daćemo im čitav red.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
<TD WIDTH=20%>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole
Kao što ste možda i sami zaključili, atribut WIDTH iz prvog reda važi i u drugom redu.

Ako nas Đole napusti, imaćemo i dalje veoma dobru tabelu, ali sa jednim praznim mestom.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
<TD WIDTH=20%>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima

Da bi smo browserima pomogli da se lakše snalaze, na to prazno mesto ćemo staviti specijalni znak, koji predstavlja prazno mesto (non-breaking space - &nbsp;). Naravno, to nije neophodno za ovako jednostavne tabele; međutim, što je tabela kompleksnija, biće više šansi da i Vi i browser pogrešite.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Pera</TD>
<TD WIDTH=20%>Laza</TD>
<TD WIDTH=20%>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>&nbsp;</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima  

Vratimo Đoleta nazad i uklonimo sve atribute, sem BORDER.

<TABLE BORDER=3>

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

Sledeća dva atributa koja ćemo upoznati su CELLPADDING i CELLSPACING. Oba se koriste unutar taga <TABLE>. CELLPADDING predstavlja količinu prostora između ivice ćelije i sadržaja ćelije.

<TABLE BORDER=3 CELLPADDING=12>

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole
Default vrednost ovog atributa je 1.

Ako stavimo atribut CELLSPACING umesto CELLPADDING-a, dobićemo malo drugačiji efekat.

<TABLE BORDER=3 CELLSPACING=12>

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole
Uobičajena default vrednost atributa CELLSPACING je (najčešće) 2.

Naravno, moguće je koristiti prethodna dva atributa u kombinaciji.

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

Da bi smo videli šta se dešava, podesimo obe vrednosti na 0.

<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

 

* PITANJE: Napravio sam svoj homepage pomoću SooperCool HTML editora. Moje stranice izgledaju super u browseru A, ali ih uopšte nema u browseru B. O čemu se radi?

A: Kadgod "nestane" čitava strana, ili bar veliki deo strane, krivac za to je najčešće nadostatak jednog ili više </TABLE> tagova. Proverite da li imate sve zatvarajuće tagove, a naročito /TABLE; to bi trebalo da reši problem.;-)
Sve je češće izostavljanje tagova koji zatvaraju ćelije (</TD>), redove (</TR>) i cele tabele (</TABLE>). Čak i zvanična preporuka W3C-a (World Wide Web Consortsium) tvrdi da je moguće izostavljanje barem tagova za zatvaranje ćelija i redova. Međutim, što su tabele složenije, to je veća šansa da će to zbuniti browser. Predlog za rešenje ovog problema: uvek pišite sve tagove za zatvaranje!

<--Lekcija 2        Lekcija 4-->

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