Tablice su opsirna i jako korisna oblast. Da biste ih upotpunosti savladali, morate
pogledati gomilu tablica i mnogo vjezbati.
Osim za normalnu uporabu (tablarni prikaz podataka) tablice se koriste i za layout
(dizajn). Tocnije za ekzaktno pozicionranje. (Naravno nikad 100% ekzaktno).
Tablicu otvarate sa tagom <table>, a zatvarate sa tagom </table>.
Tablice uz to sadrze redke (vodoravno) i stupce. Dakle nakon <table> taga slijedi
<tr>-tag kojim zapocinjete novi redak. Unutar redeka dolazi <td>-tag
koji otvara stupac, odnosno tocnije receno jednu celiju untar upravo otvorenog redka (<tr>-tag).
Celije (<td></td>) sadrze text ili druge informacije.
Jedan primjer:
<table border="0" width="200">
<tr>
<td>
Ovdje slijedi sadrzaj
</td>
<td>
Druga celija u redku
</td>
</tr>
<table>
|
|
Ovdje slijedi sadrzaj
|
Druga celija u redku
|
|
Ovo je primjer jedne jednostavne tablice sa samo jednim redkom i dva stupca
(celije). Samo da biste shvatili koncept unutar <tr> taga moze biti teoretski gledano
bezbroj celija (td tagova). Uz to jos morate obratiti paznju da svaki otvoreni tabelarni tag
opet i zatvorite. U protivnom npr. Netscape vas kaznjava prikazom jedne prazne stranice.
Atributi
<table>-tag moze imati sljedece atribute:
- width="xx" - sirina tablice u pixelima ili procentima.
- border="x" - ram (okvir) tablice, odnosno linije u tablici, kod border="0" tablice bez okvira.
- bgcolor=".." - boja pozadine tablice, (kao u body tagu, vidi osnove).
- background=".." - slika u pozadine (kao kod body taga).
- cellspacing="x" - daje debljinu linija unutar tablice. (tocinje razmak izmedju celija)
- cellpading="x" - daje razmak izmedju sadrzaja jedne celije i okvira te celije.
- bordercolor=".." - daje okviru i linijama unutar tabele zeljenu boju. (ukoliko border="1" ili vise)
- height="x" - visina tablice u pikselima ili procentima, ovo nije dio HTML 3.2 standarda, ali radi.
Stupci <td> takodje mogu primiti atribute:
- width="x" - minimalna sirina
- bgcolor=".." - vidi gore.
- background=".." - vidi gore.
- collspan="x" - ostvaruje da se jedna celija prostire preko x stupaca
- align="left|center|right" - sadrzaj celije, lijevo, desno ili centrirano.
- valign="down|top|middle" - kao align samo po vertikalnoj liniji.
- rowspan="x" - spaja celije duzinom x redaka (vertikalno)
Slijede primjeri:
<table border>
<tr>
<th colspan=2>Sadrzaj jedne celije, koja se pruza preko dva redka.
</tr>
<tr>
<td>sadrzaj prve celije ispod produzene celije
<td>sadrzaj druge celije ispred produzene celije
</tr>
</table>
|
Izgleda ovako:
|
Sadrzaj jedne celije koja se pruza preko 2 redka
|
|
sadrzaj prve ceilje ispod produzene celije
|
sadrzaj druge celije ispod produzene celije
|
Analogno postupate za rowspan, kod izgleda ovako.
<table border>
<tr>
<th rowspan=2>sadrzaj celike, koja se pruza preko 2 stupca.
<td >Sadrzaj prve celije kraj produzene celije
</tr>
<tr>
<td>sadrzaj druge celije kraj produzene celije
</tr>
</table>
|
To izgleda ovako:
| sadrzaj prve celije koja se pruza preko 2 stupca.
|
sadrzaj prve celije kraj produzene celije
|
|
sadrzaj druge celije kraj produzene celije
|
Konacno tu su i tzv. slijepe tablice, tablice bez okvira one se koriste za pozicioniranje
texta, mnogi dizajneri koriste tablice, mjesto frameova, sto je ponekad sigurno
korisnije a izgleda ponekad i bolje. Ima jako mnogo primjera. Ali da bi ste to ostvarili
potrebno je mnogo prakse, vjezbe i probanja. Pa sto cekate startajte neki editor i krenite u
lov na tablice...
