Tabele

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 B
D E
C
F G 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:

<table border="width" cellpadding="padding" cellspacing="spacing"

width="width">
.
.
.
</table>

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:

<td rowspan="n" colspan="n" width="n" align="center|right"

valign="top|bottom" bgcolor="n">
.
(informatiile care vor aparea in celula)
.
</td>

Daca celula se intinde pe mai mult de un singur rand, foloseste <td rowspan="n"> unde n este
numarul de randuri pe care celula le contine. Pentru coloane, foloseste <td colspan="n"> unde n
este numarul de coloane continute. Celula pe care vrem sa o definim se va intinde pe coloanele aflate
la dreapta si randurile de sub ea. De exemplu, celula A este definita la randul 1, coloana 1, cu
colspan="2" si rowspan="2". Aceasta inseamna ca ea contine 4 celule mai mici, determinate de
primele 2 randuri si primele 2 coloane ale tabelului. Poti observa ca celulele A si B contin intreg randul
2, desi sunt definite la randul 1. Aceasta inseamna ca nu mai este necesara o sectiune <tr></tr>
pentru randul 2, deoarece acesta nu mai are spatiu pentru alte celule. De fapt, in loc de doua randuri,
celulele A si B 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 a 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:

<table width="390" border="2" cellspacing="0"

cellpadding="0">
<tr>
<td colspan="2" bgcolor="#333333" align="center">
<font color="#FFFFFF">A</font>
</td>
<td colspan="2" bgcolor="#999999" align="center">
<font color="#FFFFFF">B</font>
</td>
</tr>
 <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 folosi tabele

1. Pentru a prezenta informatii citite dintr-o baza de date:

Denumire Cantitate TVA

CD-ROM REWRITABLE SONY 52X/24X/52X BULK 0 49

CD-ROM REWRITABLE TEAC 52X/24X/52X BULK 0 52.5

CD-ROM 52X SONY 0 21.5

CD-ROM 52X ASUS 0 23

DVD-ROM TEAC 16 0 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 a separarea liniilor si coloanelor.

2. Pentru a pozitiona text, figuri sau alte obiecte:

Text deasupra imaginii

Text Text
la stanga la dreapta
imaginii imaginii

Text sub imagine

Poti utiliza tabele fara border pentru a afisa textul insotit de imagini.

3. Pentru a evidentia anumite paragrafe:

Acest paragraf este continut de un tabel cu atributul width=80%.

Aceasta tehnica te va ajuta sa aranjezi textul in pagina si sa-l faci mai lizibil. Este indicat sa folosesti
valori absolute pentru dimensiunile tabelului (de exemplu 600 pixeli) pentru a te asigura ca o linie nu
va contine mai mult de 10-15 cuvinte, ceea ce face textul mai usor de urmarit.

4. Pentru a evidentia textul folosind celule de culori diferite:

Text

Text

Text

Este indicat sa utilizezi acest artificiu cand ai mult text pe pagina, pentru a-l face mai atractiv.