Tabele

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 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

G

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 si , acestea indicand inceputul si sfarsitul unui tabel. Sintaxa pentru 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 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 si ? Mai intai, fiecare rand al tabelului trebuie definit prin tag-urile si , marcand astfel inceputul si respectiv sfarsitul acestuia. Intre si , pentru a crea fiecare celula in parte trebuie sa folosesti elementele si . Fiecare tag are o serie de proprietati, dupa cum poti observa in exemplul de mai jos:

. (informatiile care vor aparea in celula) . Daca celula se intinde pe mai mult de un singur rand, foloseste unde n este numarul de randuri pe care celula le contine. Pentru coloane, foloseste 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 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 . 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:

A		B
C	D		E
	F	G	H

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 pentru noul tabel in interiorul unei celule () 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

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 la stanga imaginii

Text la dreapta 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

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.

urmarit.