Tabelele sunt unele dintre cele mai importante elemente ale informatiei. In principiu, ele sunt folosite pentru asezarea de valori numerice intr-o anumita ordine in siruri si coloane, astfel incat acestea usureaza anumite calcule si ajuta la realizarea de clasificari.
Pana mai ieri, tabelele au fost folosite in HTML pentru design. Astfel, dezvoltatorul isi imagina pagina sub forma unui tabel si aseza totul folosindu-se de structura acestuia. Acum, incercam pe cat posibil sa ne rezumam la folosirea tabelului doar pentru transmiterea de informatii.
Tabelele cu randuri si coloane
Noi interpretam tabelele folosindu-ne de coordonatele rand si coloana. Daca te uiti intr-un fisier de tip Excel, vei vedea ca acolo coloanele sunt notate cu litere in timp ce randurile sunt notate cu cifre.
Sa facem si noi un tabel:
<table border="1">
<tr>
<td>Oana</td><td>Vasilache</td><td>Bucuresti</td><td>3</td>
</tr>
<tr>
<td>Marius</td><td>Coltescu</td><td>Cluj</td><td>12</td>
</tr>
<tr>
<td>Ion</td><td>Popescu</td><td>Buzau</td><td>2</td>
</tr>
<tr>
<td>Lita</td><td>Chitalau</td><td>Iasi</td><td>6</td>
</tr>
<tr>
<td>Marghioala</td><td>Nastase</td><td>Galati</td><td>7</td>
</tr>
</table>
Codul se va afisa asa:
Si acum sa il explicam:
Orice element de tip tabel este continut intre tag-urile <table> si </table>. Se poate vedea ca aici am folosit si atributul “border” pentru a da o grosime mai mare liniilor dintre celulele tabelului. Totusi, pentru design, te-as sfatui sa folosesti CSS.
Atunci cand avem un rand de inregistrari, acesta trebuie cuprins intre tag-urile <tr> si </tr> (tr = “table row”).
Un rand contine celule care corespund fiecarei coloane a tabelului, acestea fiind incluse intre tag-urile <td> si </td>.
Capul si corpul tabelelor
Toate bune si frumoase, dar ce ne facem cand vrem sa si explicam coloanele?
Ei bine, o solutie simpla, dar nu si corecta, ar fi sa le introducem intr-un nou rand de celule care se se afle inaintea datelor tabelului.
Cu toate acestea, avem la dispozitie elementele thead si tbody, putand astfel sa impartim tabelul in parti logice. Astfel, explicatia fiecarei coloane o vom introduce in capul tabelului (care va fi cuprins intre tag-urile <thead> si </thead>), in timp ce datele tabelului le vom introduce in corpul tabelului (<tbody></tbody>).
Iti vine sau nu sa crezi, vom avea si un footer al tabelului, dar despre acesta iti voi spune intr-o lectie viitoare.
Prin urmare, acum tabelul va arata astfel:
<table border="1">
<thead>
<tr>
<th scope="col">Prenume</th><th scope="col">Nume</th><th scope="col">Oras</th><th scope="col">Mere</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oana</td><td>Vasilache</td><td>Bucuresti</td><td>3</td>
</tr>
<tr>
<td>Marius</td><td>Coltescu</td><td>Cluj</td><td>12</td>
</tr>
<tr>
<td>Ion</td><td>Popescu</td><td>Buzau</td><td>2</td>
</tr>
<tr>
<td>Lita</td><td>Chitalau</td><td>Iasi</td><td>6</td>
</tr>
<tr>
<td>Marghioala</td><td>Nastase</td><td>Galati</td><td>7</td>
</tr>
</tbody>
</table>
Codul se va afisa cam asa:
Scope
Observa faptul ca celulele din <thead> sunt desemnate folosind tag-ul <th>. Tag-ul <th> dispune de atributul “scope”. Acesta este important pentru citirea corecta a datelor din tabel, prin “scope” spunand browser-ului ce zona acopera acel titlu. Astfel, daca se doreste toate valorile la care se refera titlul “Nume”, in momentul in care scope-ul acestuia este “col”, citirea tabelului se va face pe coloana. Daca valoarea pentru atributul “scope” ar fi fost “row”, citirea tabelului ar fi fost pe orizontala. Pe langa acestea, mai avem ca valori si “colgroup” si “rowgroup” care acopera grupuri de coloane si, respectiv, grupuri de randuri.
Descrierea tabelului
Orice tabel trebuie sa aiba si un titlu. Pentru aceasta avem tag-ul <caption>:
<table border="1">
<caption>Unde au ajuns merele din padure</caption>
<thead>
<tr>
<th scope="col">Prenume</th><th scope="col">Nume</th><th scope="col">Oras</th><th scope="col">Mere</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oana</td><td>Vasilache</td><td>Bucuresti</td><td>3</td>
</tr>
<tr>
<td>Marius</td><td>Coltescu</td><td>Cluj</td><td>12</td>
</tr>
<tr>
<td>Ion</td><td>Popescu</td><td>Buzau</td><td>2</td>
</tr>
<tr>
<td>Lita</td><td>Chitalau</td><td>Iasi</td><td>6</td>
</tr>
<tr>
<td>Marghioala</td><td>Nastase</td><td>Galati</td><td>7</td>
</tr>
</tbody>
</table>
Tabelul final pentru aceasta lectie va arata astfel:
In speranta ca ti-ai facut o idee despre tabele, te invit la lectia urmatoare pentru a continua aceasta tema…
