HTML - Tabele

[sightlessGraphic Designer]

Tabele

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

Pentru inserarea unui tabel este folosita perechea de etichete

Cod:

<table> si </table>

pentru un rand

Cod:

<tr> si </tr>

iar pentru o celula

Cod:

<td> si </td>

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

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>

Afisare

rosu	galben
alb	verde

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

HTML

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>

Afisare

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

Cod:

<th> si </th>

in locul etichetelor

Cod:

<td> si </td>

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

Cod:

<th> si </th>

HTML

Cod:

<table border="1"> <tr> <th width="120">Titlul 1</th> <th width="120">Titlul 2</th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>

Afisare

Titlul 1	Titlul 2
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

HTML

Cod:

<table border="1"> <caption>Necesar alimente</caption> <tr> <th width="120">Produse</th> <th width="120">Cantitate</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>

Afisare

Necesar alimente

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

SURSA