HTML Tabele - Lekcija 2
Dobro... ovo smo do sada napisali...
<TABLE>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
...što daje ovaj rezultat:
Prvo učinimo da ovo više liči na tabelu, tako što ćemo dodati ivicu. Svaki put kad nešto promenite, i želite da vidite tu promenu, uradite sledeće: snimite tu promenu u Notepadu (File/Save) a onda pritisnite dugme Reload (ili Refresh) u Vašem browseru. S vremena na vreme to neće biti baš dovoljno. Tad iskoristite SuperReload (SHIFT+ Reload).
<TABLE BORDER=1>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Šta mislite o debljoj ivici?
<TABLE BORDER=5>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
A, šta mislite o baš debeloj ivici?
<TABLE BORDER=25>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Ili, možda, tabela bez ivica?
<TABLE BORDER=0>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Kao što vidite, default vrednost je obično bez ivica; default font u tabeli je Times New Roman, crne boje (ovo važi za Netscape!).
Držimo se za sada skromne debljine ivice.
<TABLE BORDER=3>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Kada nikakve veličine nisu naglašene, tabela će biti onolika koliko je to neophodno.
<TABLE BORDER=3>
<TR>
<TD>Pera, Mika i Laza</TD>
</TR>
</TABLE>
Određivanje veličine tabele je prilično jednostavno.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Pera, Mika i Laza</TD>
</TR>
</TABLE>
Šta mislite o ovome?
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Pera, Mika i Laza</TD>
</TR>
</TABLE>
Oterajmo Perine drugove.
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Smanjimo veličinu tabele na 50% veličine prozora browsera.
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Zadajmo sada širinu od 50 tačaka umesto 50%.
<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Možda 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Kao što sami primećujete, postoje dva načina za određivanje širine tabele. Svaki način ima svoje prednosti, ali je to sada potpuno nevažno.
Takođe možemo određivati i visinu tabele.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Pera</TD>
</TR>
</TABLE>
Takođe moguće je kontrolisati gde će se nalaziti sadržaj ćelije.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Pera</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Pera</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Pera</TD>
</TR>
</TABLE>
Verovatno zaključujete i sami da je default vrednost (obično) ALIGN=LEFT. Uzgred, pretpostavljam da već znate šta je podrazumevana vrednost. (Ne? Dobro, reći ću Vam - default/podrazumevna vrednost je vrednost nekog atributa koja se podrazumeva ako nije drugačije rečeno.)
Moguće je, takođe, kontrolisati i vertikalni položaj sadržaja ćelije.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Pera</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Pera</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Pera</TD>
</TR>
</TABLE>
Podrazumevana/default vrednost je obično sredina (middle).
Slike se takođe mogu koristiti unutar tabela. Kao primer, iskoristićemo ovu Perinu sličicu*
, 
, koju ćete snimiti u Vaš radni folder (tj. u folder u kome se nalazi table1.html). Zatim, zamenimo Peru tagom <IMG>.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="pera.gif" WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>
Sada bih napomenuo da ne bi bilo loše uključiti i atribut za veličinu slike. To omogućava mnogo brže učitavanje slike, a samim tim i čitave web strane.