Tabele HTML

 :: Tutoriale :: Tutoriale Web :: HTML

In jos

Tabele HTML

Mesaj Scris de Pein la data de Lun Iul 26, 2010 3:09 am

Aceste etichete au o mare utilizare deoarece tabele constituie
structura care sta la baza organizarii marii majoritati a paginilor web
(inclusiv cea de fata). Tabelul este format din linii si coloane
impartind zona in celule. Fiecare celula pastreaza informatia care va
fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea
acelasi numar de celule. Daca dorim ca o celula sa fie goala vom
introduce un spatiu gol (space) sau codul echivalent . Pentru inserarea unui tabel este folosita perechea de etichete si
, pentru un rand si iar pentru o celula si . Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele. Exemplu:
tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px,
coloana 2 latime 160px, fiecare celula are o alta culoare de fond
(bgcolor)
HTML
Afisare
Cod:
<table border="1"> <tr><td width="80">
bgcolor="red">rosu</td><td width="160">
bgcolor="yellow">galben</td></tr> <tr><td>
bgcolor="white">alb</td><td>
bgcolor="green">verde</td></tr> </table>
rosugalben
albverde
Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpaddind = distanta dintre marginea celului si continut Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea Exemplu:
un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din
randul 2 si rowspan pentru a uni celula 1 din randul 3 cu celula 1 din
randul 4
HTMLAfisare
Cod:

<table border="1"> <tr> <td bgcolor="white">R1
C1</td> <td bgcolor="yellow">R1 C2</td> <td>
bgcolor="white">R1 C3</td> <td bgcolor="yellow">R1
C4</td> </tr> <tr> <td colspan="2">
bgcolor="red">R2 C1+C2</td> <td bgcolor="yellow">R2
C3</td> <td bgcolor="red">R2 C4</td> </tr><tr> <td rowspan="2" bgcolor="white">R3 C1 + R4
C1</td> <td bgcolor="yellow">R3 C2</td> <td>
bgcolor="white">R3 C3</td> <td bgcolor="yellow">R3
C4</td> </tr> <tr> <td bgcolor="red">R4
C2</td> <td bgcolor="yellow">R4 C3</td> <td>
bgcolor="red">R4 C4</td> </tr> </table>

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
Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete
si in locul etichetelor si
. Astfel continutul celulei va fi afisat ingrosat si aliniat
pe mijloc. Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele si
Cod:



Titlul
1 Titlul 2lt;/th> <table border="1"> <tr> </tr><tr> <td>1</td> <td>2</td> </tr><tr> <td>3</td> <td>4</td> </tr></table>
Afisare



Titlul
1 Titlul 2lt;/th>
1 2
3 4




Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriu imediat dupa tag-ul table dar inainte de prima eticheta tr. Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption
HTMLAfisare



Necesar
alimente
Cod:



<table border="1"> Necesar
alimente <tr>
width="120">Produse
width="120">Cantitatelt;/th> </tr> <tr><td>Fructe</td> <td>1 kg</td> </tr><tr> <td>Legume</td> <td>5 kg</td></tr> <tr> <td>Carne</td> <td>1,5
kg</td> </tr> </table>

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