Html - Tabele

Html - Tabele

Prezentarea datelor sub forma de tabele prezinta avantaje din punct de vedere al claritatii si sistematizarii. Marcajele HTML dedicate formatarii tabelelor permit operatiuni asemanatoare celor din procesoarele de texte (ex. MS Word).

Definirea unui tabel in HTML se face folosind perechea de marcaje <table></table>. Prin intermediul acestei perechi de marcaje se definesc atribute valabile pentru intregul tabel. Majoritatea acestor atribute pot fi insa redefinite pentru anumite celule ale tabelului.

</table>

Semnificatiile atributelor marcajului <table> sunt:

• border - specifica grosimea chenarului tabelului. Daca are valoarea 0 sau atributul lipseste, tabelul nu va avea chenar.
• frame - defineste modul de afisare a chenarului exterior. Functioneaza in prezenta atributului 'border'. Atributul frame poate avea urmatoarele valori:
• above - afiseaza latura superioara a chenarului;
• below - afiseaza latura inferioara a chenarului;
• border - afiseaza chenarul complet;
• box - afiseaza chenarul complet (la fel ca si border);
• hsides - afiseaza partile inferioara, respectiv superioara ale chenarului;
• vsides - afiseaza partile laterale (stanga, dreapta) ale chenarului;
• lhs - afiseaza latura stanga a chenarului;
• rhs - afiseaza latura dreapta a chenarului;
• void - fara bordura exterioara.
• rules - defineste modul de afisare a chenarului interior dintre celulele tabelului. Functioneaza in prezenta atributului 'border'. Atributul rules poate avea urmatoarele valori:
• none - nu se afiseaza chenar interior;
• groups - afiseaza chenar intre grupurile de celule definite de thead, tbody, colgroup, col, tfoot;
• rows - afiseaza chenar intre linii;
• cols - afiseaza chenar intre coloane;
• all - afiseaza chenar intre toate celule interioare.
• width, height - specifica latimea, respectiv inaltimea tabelului. In cazul in care valorile specificate nu sunt suficiente pentru afisarea continutului celulelor, valorile vor fi modificate automat de catre browser astfel incat tot continutul sa fie afisat. Valorile se pot exprima absolut, in pixeli, sau relativ la latimea ecranului (width), respectiv la inaltimea ecranului (height). Trebuie mentionat ca atributul 'height' nu face parte din specificatiile HTML.
  Este recomandat sa lasi browserul sa calculeze valoarea pentru 'height' in functie de continutul tabelului.
• bgcolor - specifica culoarea pentru fundalul tabelului.
• bordercolor - specifica culoarea chenarului.
• bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este recomandata folosirea de culori complementare pentru a obtine efectul scontat. Sunt extensii Microsoft.
• background - URL-ul imaginii care va fi utilizata ca fundal al tabelului. In cazul in care dimensiunile imaginii sunt mai mici decat cele ale tabelului, ea va fi repetata astfel incat sa acopere intregul fundal al tabelului. Este extensie Microsoft.
• cellspacing - specifica distanta dintre celule.
• cellpadding - specifica marginea interioara a celulelor.
• align - specifica alinierea pe orizontala a tabelului (stanga|centru|dreapta).
• valign - specifica alinierea pe verticala a tabelului (sus|mijloc|jos).
• summary - o descriere a tabelului, de obicei pentru browsere non-vizuale.

Un alt marcaj care poate aparea in cadrul unui tabel este <caption>. Are urmatoarea sintaxa:

Marcajul caption adauga o scurta descriere (titlu) a tabelului. Poate fi utilizat numai in cadrul unui marcaj <table>, imediat dupa acesta.

Are urmatoarele atribute:

• align - in mod normal browser-ul va afisa titlul aliniat central si deasupra/dedesubtul tabelului. In HTML 4.0 atributul align a fost abandonat in favoarea formatarii prin CSS (text-align si vertical-align).
• valign - precizeaza pozitia titlului in raport cu tabelul (sus/jos).

Marcajul <tr> defineste o linie intr-un tabel. Are urmatoarea sintaxa:

Poate avea urmatoarele atribute:

• align - specifica modul in care va fi aliniat pe orizontala continutul liniei de tabel.
• valign - specifica modul in care va fi aliniat pe verticala continutul liniei de tabel.
• bgcolor - specifica culoarea pentru fundalul liniei de tabel.
• bordercolor - specifica culoarea chenarului celulelor din linie de tabel.
• bordercolorlight, bordercolordark - sunt atribute utilizate pentru a create un efect 3D asupra chenarului de tabel.

Marcajul <th> defineste o celula din antetul tabelului. Sintaxa este:

Poate avea urmatoarele atribute:

• align, valign - indica alinierea orizontala si verticala a continutului celule, in celula.
• colspan - specifica numarul de coloane peste care se intinde celula curenta spre dreapta.
• rowspan - specifica numarul de linii peste care se intinde celula curenta in jos.
• nowrap - impiedica 'ruperea' textului din celula pe mai multe linii.
• bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor mentionate mai sus.

Marcajul <td> defineste o celula din tabel.

Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, in cazul marcajului <th>.

Ultimele atribute pe care le voi prezenta sunt colspan si rowspan. Ele extind o celula pe mai multe coloane, respectiv linii ale tabelului.

Probabil ca multi se vor intreba de ce am prezentat atat de multe marcaje si atribute. In cele mai multe cazuri, marcajele <table>, <tr>, <td> sunt suficiente pentru a construi un tabel. Pe masura ce paginile HTML pe care le vei realiza vor deveni mai complexe, vei vedea singur de ce marcaje sau atribute ai nevoie. Succes !