[Tutorial] Creare tabele in Html

Creearea tabelelor [HTML]

Mesaj Scris de Motanel la data de Dum Ian 24, 2010 3:21 am
Aceste etichete au o mare utilizare deoarece tabelele constituie structura care stă la baza organizării marii majorităţi a paginilor web (inclusiv cea de faţă).

Tabelul este format din linii şi coloane împărţind zona în celule. Fiecare celulă păstrează informaţia care va fi afişată. Pentru o afişare corectă a tabelului, fiecare rând va avea acelaşi număr de celule. Dacă dorim ca o celulă să fie goală vom introduce un spaţiu gol (space) sau codul html echivalent  

Pentru inserarea unui tabel este folosită perechea de etichete şi , pentru un rând şi (table rows) iar pentru o celulă şi (table data cell) .

Tabele pot fi îmbricate, adică în interior pot conţine unul sau mai multe tabele.

Exemplu: tabel cu 2 coloane şi 2 rânduri, border 1, coloana 1 lăţime 80px, coloana 2 lăţime 160px, fiecare celulă are o altă culoare de fond (bgcolor)

Codul HTML

rosu	galben
alb	verde

rosu galben
alb verde


Atributele etichetei table sunt:
border = bordura (0 = lipsă bordura)
width = lăţimea tabelului
height = înălţimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc style)
cellspacing = distanţa între celule
cellpaddind = distanţa dintre marginea celului şi conţinut
Atributele etichetei td sunt:
align = aliniere pe orizontală a conţinutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticală a conţinutului (top=sus, bottom=jos, middle=mijloc, baseline=asemănator cu top)
width = lăţimea celulei
height = înălţimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc atributul style)
colspan = uneşte celula cu cea din dreapta ei
rowspan = uneşte celula cu cea de sub ea


Exemplu: un tabel în care am folosit colspan pentru a uni celulele 1 şi 2 din rândul 2 şi rowspan pentru a uni celula 1 din rândul 3 cu celula 1 din rândul 4:

Codul HTML

R1 C1	R1 C2	R1 C3	R1 C4
R2 C1+C2		R2 C3	R2 C4
R3 C1 + R4 C1	R3 C2	R3 C3	R3 C4
	R4 C2	R4 C3	R4 C4

Dacă dorim să evidenţiem conţinutul primului rând (capul de tabel) putem folosi perechea de etichete şi (table header cell) în locul etichetelor şi . Astfel conţinutul celulei va fi afişat îngroşat şi aliniat pe mijloc.

Exemplu: un tabel cu 3 rânduri şi 2 coloane folosind pe primul rând etichetele şi :

Codul HTML

Titlul 1	Titlul 2
1	2
3	4

Eticheta caption va adăuga o linie text deasupra tabelului, centrată pe mijloc, de obicei folosită ca fiind un titlu al tabelului. Caption se plasează obligatoriu imediat după tag-ul table dar înainte de prima etichetă tr.
Exemplu: un tabel cu 4 rânduri şi 2 coloane folosind eticheta caption:

Codul HTML

Necesar alimente

Produse	Cantitate
Fructe	1 kg
Legume	5 kg
Carne	1,5 kg

Exemplu: tabelului anterior îi adăugăm o imagine de fundal folosind style în zona head:

Necesar alimente

Produse	Cantitate
Fructe	1 kg
Legume	5 kg
Carne	1,5 kg