Professional Documents
Culture Documents
Tabele au fost utilizate initial pentru a afisa informatiile pe paginile web, la fel ca foile de calcul
(spreadsheet). In prezent, ele sunt de obicei folosite fara contururi (borders), pentru a pozitiona
textul sau imaginile sau pentru a separa pagina in sectiuni. Iti vom arata cum poti utiliza tag-ul
<TABLE> si alte tag-uri asociate lui pentu a crea tabele complicate si iti vom oferi sugestii despre
cum
sa
folosesti
tabelele
in
site-ul
tau.
Organizarea
tabelelor
Elementele fundamentale ale unui tabel sunt celulele (cell), randurile (rows) si coloanele (columns).
Fiecare celula se poate intinde pe mai multe linii sau coloane. Exemplu:
A
C
B
D
F
E
H
Acesta este un tabel cu 4 coloane si 4 randuri, si contine 8 celule. Celulele A si B se intind pe cate 2
coloane si 2 randuri. Celula C se intinde pe 1 coloana si 2 randuri. Celula D se intinde pe 2 coloane si
1 rand. Celulele E,F,G si H contin fiecare cate un rand si o coloana (cele mai mici celule disponibile).
Tag-urile
Table
Principalele tag-uri pentru crearea unui tabel sunt <table> si </table>, acestea indicand inceputul si
sfarsitul unui tabel. Sintaxa pentru <table> este:
Atributul border defineste latimea conturului, in pixeli, care apare in jurul fiecarei celule. Daca vrei ca
tabelul sa nu fie conturat, atunci vei scrie border="0". Cellpadding reprezinta spatiul, in pixeli,
dintre marginile interioare ale unei celule si informatia pe care aceasta o contine, indiferent daca
aceasta informatie este text sau altceva (o imagine). Cellspacing este spatiul, in pixeli, dintre celule.
Daca ai optiunea de border activata, aceasta proprietate va mari distanta dintre marginile exterioare si
cele
interioare
ale
celulelor.
Width reprezinta latimea pe care tabelul o va avea pe pagina, in pixeli sau ca procentaj. Pentru a
specifica un procent din latimea ferestrei browserului (astfel incat tabelul isi va modifica dimensiunile
dupa cum fereastra in care este deschis este mai mare sau mai mica), pune semnul % dupa valoarea
numerica propriu-zisa (width="50%"). Asigura-te ca nu ai uitat sa incluzi tag-ul </table> la
sfarsitul tabelului. Daca acesta este omis, browserul Netscape nu va afisa nici tabelul, nici informatiile
pe care acesta le contine (IE este mai tolerant fata de tag-urile de incheiere care lipsesc.)
Randuri
si
celule
Deci, ce introducem intre tag-urile <table> si </table>? Mai intai, fiecare rand al tabelului trebuie
definit prin tag-urile <tr> si </tr>, marcand astfel inceputul si respectiv sfarsitul acestuia. Intre
<tr> si </tr> , pentru a crea fiecare celula in parte trebuie sa folosesti elementele <td> si </td>.
Fiecare tag <td> are o serie de proprietati, dupa cum poti observa in exemplul de mai jos:
si
vor
contine
un
singur
rand.
Pentru fiecare celula, poti preciza latimea (width) in pixeli sau ca procentaj, folosind aceeasi sintaxa
ca pentru tag-ul <table>. Uneori, latimea tabelelor poate intra in conflict cu cea a celulelor.
Browserele rezolva aceasta problema in moduri diferite, deci testeaza pagina pe cat mai multe
browsere, pentru a te asigura ca tabelele pe care le-ai definit apar la fel indiferent de browser. In
continuare, fiecare celula poate fi aranjata orizontal sau vertical, ceea ce inseamna ca poti pozitiona
textul sau imaginile din celula folosind atributele align si valign. Informatiile din celula sunt aliniate
implicit la stanga pe orizontala si la mijloc pe verticala, deci daca vrei ca ele sa apara centrate sau
aliniate la dreapta, foloseste align="center" sau align="right", si daca vrei ca ele sa apara in
partea
de
sus
sau
de
jos
celulei,
utilizeaza
valign="top"
sau
valign="bottom".
In sfarsit, bgcolor iti permite sa alegi o culoare de fundal (background) pentru fiecare celula din tabel.
Pentru a clarifica lucrurile prezentante pana acum, acesta este codul HTML pentru a construi tabelul
din exemplul de mai sus:
<tr>
<td rowspan="2" bgcolor="#666666" align="center">
<font color="#FFFFFF">C</font>
</td>
<td colspan="2" bgcolor="#CCcccc" align="center">
<font color="#000000">D</font>
</td>
<td bgcolor="#666666" align="center">
<font color="#FFFFFF">E</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center">
<font color="#000000">F</font>
</td>
<td bgcolor="#000000" align="center">
<font color="#FFFFFF">G</font>
</td>
<td bgcolor="#e5e5e5" align="center">
<font color="#FFFFFF">H</font>
</td>
</tr>
</table>
Desi tabelul nu arata ca cel din exemplu, il poti redimensiona. Tabelele sunt elastice, deci ele se pot
micsora
sau
mari
si
in
functie
de
textul
sau
imaginile
pe
care
le
contin.
Tabele
imbricate
Un tabel poate contine la randul lui alte tabele. Tot ce trebuie sa faci este sa incluzi sectiunea
<table></table> pentru noul tabel in interiorul unei celule (<td></td>) din tabelul parinte, iar
tabelul mai mic va aparea in celula respectiva. Poti observa ca daca folosesti atributul width="n%"
pentru un tabel din interiorul altui tabel, latimea acestuia va fi calculata relativ la dimensiunile
tabelului parinte (ea nu depinde de latimea ferestrei browserului). Daca vrei ca tabelul tau sa aiba o
margine vizibila, dar celulele din interiorul sau sa nu fie conturate, poti include acest tabel in altul cu
un singur rand si o singura coloana, cu optiunea de border=0 pentru tabelul inclus si border=1
pentru cel exterior.
Cand
putem
1. Pentru a prezenta informatii citite dintr-o baza de date:
Denumire
folosi
tabele
Cantitate TVA
49
52.5
21.5
23
DVD-ROM TEAC 16
40.5
Aceasta este o functie de baza a tabelelor. Daca vrei ca tabelul tau sa contina si imagini, este bine sa
folosesti
optiunea
de
border
pentru
separarea
liniilor
si
coloanelor.
Text
la stanga
imaginii
Text
la dreapta
imaginii
Text sub imagine
Poti
utiliza
tabele
fara
border
pentru
afisa
textul
insotit
de
imagini.
contine
mai
mult
de
10-15
cuvinte,
ceea
ce
face
textul
mai
usor
de
Text
Text
Text
Este indicat sa utilizezi acest artificiu cand ai mult text pe pagina, pentru a-l face mai atractiv.
urmarit.