<table>

Dupa cum spune si numele, elementul <table></table> ne ajuta sa cream un tabel intr-o pagina.

Inainte de HTML4 acest element avea un rol mult mai important fiind folosit la structurarea si stilizarea paginii.

Dar odata cu dezvoltarea limbajului CSS, acest element este folosit doar pentru a arata un tabel cu valori.

Era foarte greu de construit si de stilizat un site folosind doar tabele de aceea nu mai este recomandata aceasta metoda. Exceptie fac campaniile de marketing prin email care inca mai folosesc aceasta metoda si despre care vom discuta intr-un alt curs.

Contruirea unui tabel

Daca ne uitam la structura unui tabel vedem ca este construit din randuri si coloane.

In HTML nu avem un element pentru a defini o coloana dar avem pentru un rand, si acesta este <tr></tr> (de la table row). Asadar un tabel cu trei randuri ar avea urmatoarea structura:

<table>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
</table>

Dar pentru a crea coloane vom folosi un alt element si anume <td></td> (de la table data).

Fiecare element <td></td> folosit in interiorul unui element <tr></tr> va crea o noua coloana. Acesta element are sens doar in interiorul unui element <tr></tr> si nu poate fi adaugat in alta parte, de exemplu direct in <table></table>.

Daca am vrea sa cream doua coloane pentru cele trei randuri ale noastre vom avea urmatoarea structura:

<table>
    <tr>
        <td>Rand 1, Coloana 1</td>
        <td>Rand 1, Coloana 2</td>
    </tr>
    <tr>
        <td>Rand 2, Coloana 1</td>
        <td>Rand 2, Coloana 2</td>
    </tr>
    <tr>
        <td>Rand 3, Coloana 1</td>
        <td>Rand 3, Coloana 2</td>
    </tr>
</table>

Care va arata astfel:

Cel mai important lucru este sa nu pierdem evidenta elementelor <td></td>. Daca vrem doua coloane in tabel, ar trebui sa avem cate doua elemente pe fiecare rand.

Atribute

Elementul <table></table> avea multiple atribute (inainte de HTML4) care ii influenta comportamentul, dar aproape toate au fost inlocuite de CSS. Asa ca putem spune ca impreuna cu acest element se pot folosi doar atributele id si class.

Putem bineinteles avea o celula care se intinde pe doua randuri folosind atributul rowspan (de la row span), sau pe doua coloane folosind atributul colspan (de la column span). Aceste atribute pot fi folosite doar cu elementul <td></td>

<table>
    <tr>
        <td rowspan="2">Rand 1, Coloana 1</td>
        <td>Rand 1, Coloana 2</td>
    </tr>
    <tr>
        <!-- celula lipsa -->
        <td>Rand 2, Coloana 2</td>
    </tr>
    <tr>
        <td>Rand 3, Coloana 1</td>
        <td>Rand 3, Coloana 2</td>
    </tr>
</table>

Iar rezultatul va fi:

Vedem cum atributul rowspan ne ajuta sa extindem o celula pe doua randuri. De aceea am omis prima celula din al doilea rand (Rand 2, Coloana 1), pentru ca locul ei a fost ocupat de celula de mai sus.

Pentru elementul <tr></tr> putem sa folosim doar atributele class si id

Alte elemente

Este posibil sa intalniti tabele care contin si alte elemente pe langa cele de mai sus.

De exemplu putem preciza capetele de coloana folosind <thead></thead>, partea principala folosind <tbody></tbody> si partea de jos folosind <tfoot></tfoot> exact ca intr-un website. Toate trei trebuie sa apara in aceasta ordine:

<table>
    <thead>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rand 1, Coloana 1</td>
            <td>Rand 1, Coloana 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
</table>

Astfel putem defini mai clar partile dintr-un tabel. Dar acestea nu sunt foarte des intalnite, dar e bine sa stim ca exista.