Welcome To 4EN3RGY Romania
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!

4en3rgY Romania


Nu sunteti conectat. Conectati-va sau inregistrati-va

[Tutorial] Creare tabele in Html

Vezi subiectul anterior Vezi subiectul urmator In jos  Mesaj [Pagina 1 din 1]

1 [Tutorial] Creare tabele in Html la data de 16/1/2012, 17:55

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









rosugalben
albverde

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 C1R1 C2R1 C3R1 C4
R2 C1+C2R2 C3R2 C4
R3 C1 + R4 C1R3 C2R3 C3R3 C4
R4 C2R4 C3R4 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 1Titlul 2
12
34




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
ProduseCantitate
Fructe1 kg
Legume5 kg
Carne1,5 kg




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
























Necesar alimente
ProduseCantitate
Fructe1 kg
Legume5 kg
Carne1,5 kg

Vezi profilul utilizatorului

Robotelul cu reclame


Vezi subiectul anterior Vezi subiectul urmator Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum