Lectia nr.6-->Tabele

Aceste etichete au o mare exploatare pentru că tabele reprezintă structura care sta la baza organizarii marii majoritati a paginilor web (inclusiv cea de fata).

Tabelul este compus 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 <table> si </table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>.

Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.

[url=http://www.as.ro/ftpadmin/index.php?sessionID=355oopovpq1hfv8b10d6a3eb64&act=getfile&pwd=%2FHTML&mimetype=text%2Fhtml&file=11.html]Exemplu:[/url] tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px, fiecare celula are o alta nuanță de fond (bgcolor)

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

Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = colorit 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 = colorație de fundal
background = imaginea de fundal
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea

[url=http://www.as.ro/ftpadmin/index.php?sessionID=355oopovpq1hfv8b10d6a3eb64&act=getfile&pwd=%2FHTML&mimetype=text%2Fhtml&file=12.html]Exemplu:[/url] un tabel in care am întrebuințat 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

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

Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete <th> si </th> in locul etichetelor <td> si </td>. Astfel continutul celulei va fi afisat ingrosat si aliniat pe mijloc.

[url=http://www.as.ro/ftpadmin/index.php?sessionID=355oopovpq1hfv8b10d6a3eb64&act=getfile&pwd=%2FHTML&mimetype=text%2Fhtml&file=13.html]Exemplu:[/url] un tabel cu 3 randuri si 2 coloane întrebuințând pe întâiul rand etichetele <th> si </th>

HTML

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

Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriu rapid dupa tag-ul table dar inainte de prima eticheta tr.

[url=http://www.as.ro/ftpadmin/index.php?sessionID=355oopovpq1hfv8b10d6a3eb64&act=getfile&pwd=%2FHTML&mimetype=text%2Fhtml&file=14.html]Exemplu:[/url] un tabel cu 4 randuri si 2 coloane folosind eticheta caption

HTML

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