Tabele!

Used to format text.

Create a Newspaper Effect.

Make a menu;
Home
Other Page

Kolikogod lepo bilo za popunjavanje brojevima, tabele su "zakon" za uredjenje tekstova.

Evo upravo ovde je to primenjeno i radimo s tabelom koja ima dve kolone, i nem aredova. Poznati su vam novinski stubci, e pa oni su tako izvedeni, s vise kolona.

Takodje mogu biti upotrebljeni kao meniji, npr sa leve strane.

U gornjem primeru vide se bordure, ali u donjoj se ne vide i tabela je sastavljena od tri kolone, tri celije, s atributom BORDER="0". Isto tako i za redjanje slika su zakon. Vidite kao su se lepo slozila navigacijska dugmad.

mabutba1 mabutho1 mabutnx1
A sve ovo ustvari ovako izgleda kada se zada: BORDER=1
mabutba1 mabutho1 mabutnx1

Pogledajte ovu prostu tabelu dole.

INTERESTS
My Interests My Friend's Interests
Being inactive Being active
Watching Television Playing sports

Formiranje TABELE vrsi se prvo s <table></table> tagovima. Sledece, stavio sam NASLOV <caption align="center">Interests</caption>

U ovom primeru imamo tri reda, a samim tim i tri taga za redove.<tr></tr> Prvi red ima dva naslova, headings, stoga su izvedena dva naslova u dve kolone, tj. tekuci red sam podelio na dve kolone; to se zove: header tags (TH)

<tr><th>My Interests</th><th>My Friends Interests</th></tr>

Tekst u header tags je uvek bold i centriran. Na kraju sam uneo podatke u tabelu.

<tr><td>Being Inactive</td><td>Being Active</td></tr>
<tr><td>Watching Television</td><td>Playing Sports</td></tr>

Sveukupno, kod izgleda ovako

<table>
<caption align="center">Interests</caption>
<tr>
<th>My Interests</th><th>My Friends Interests</th>
</tr>
<tr>
<td>Being Inactive</td><td>Being Active</td>
</tr>
<tr>
<td>Watching Television</td><td>Playing Sports</td>
</tr>
</table>

I drugi vazni elementi tabele!

I am spanning 3 rows! Moja tabela
Postoji razmak (PADDING) koji me udaljava od bordera!
Umetnuta tabela
The self known to me The self unknown to me and unknown by others
The self known to me and known by others The self unknown to me but known by others
Watching Television Playing sports

Pogledaj kod ove tabele

Prvo sto primecijete je dosta debeo crni border! To smo postigli sa

<table width="95%" border="10" border="black" name="table1" id="table1">

BORDER=0, ce ukinuti border, a bordercolor="black" daje crni border.

Sigurno ste primetili da prva celija izgleda veca ili sira od drugih. Ne prati sirinu jednog reda nego je RAZVUCENA (rowspanning) tri sirine reda u ovom slucaju. <TD> u prvom redu<TDdodan na > ;

Treba zapamtiti da se celija moze razvuci po visini u x-redova tagom ROWSPAN=x, i da se celija moze razvuci ili zauzeti sirinu x-kolona sa COLSPAN=x!

<td rowspan="3" .. >

Takodje ova celija ima svoj background image;

<td rowspan="3" background="PinkBackground.gif" align="center" width="20%">Rasirio sam se 3 reda!</td>

Mozete videti da je ravnanje zadato align="center" sto znaci u "sredinu" a posto smo se rasirili tri reda, tada se ravnanje zadaje sa valign ako zelimo vertikalno ravnanje. width="20%" znaci da ce celija biti velicine 20% od ukupne velicine tablele.

ROWSPAN i COLSPAN Pogledajte ovde kako se to radi!

ALIGN - o ravnanju mozete ovde pogledati ovde ako pritisnete!

CELLPADDING i CELLSPACING - udaljenosti od ivice mozete ovde pogledati ovde ako pritisnete!


Izlaz