Tabele HTML

Un tabel HTML organizeaza datele in randuri (orizontale) si coloane (verticale), la fel cum arata un tabel dintr-un caiet sau un document Word. Tabelele sunt ideale pentru date structurate: orar scolar, clasament sportiv, lista de produse cu preturi, inventar de stoc.

Un tabel HTML se construieste cu trei tag-uri de baza:

• <table> — containerul intregului tabel
• <tr> (Table Row) — defineste un rand
• <td> (Table Data) — defineste o celula de date in interiorul unui rand

Gandeste-te la un tabel ca la o foaie de calcul (Excel/Calc): <table> este toata foaia, <tr> este un rand numarat (1, 2, 3...), iar <td> este o celula individuala (A1, B1, C1...).

<table>
  <tr>
    <td>Ionescu Maria</td>
    <td>Matematica</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Popescu Ion</td>
    <td>Informatica</td>
    <td>9</td>
  </tr>
</table>

Codul de mai sus creeaza un tabel cu 2 randuri si 3 coloane. Fiecare <tr> este un rand, iar fiecare <td> din interiorul lui este o celula. Browserul afiseaza celulele aliniate automat in coloane.

Important: implicit, browserul nu afiseaza borduri pentru tabel. Datele apar aliniate, dar fara linii vizibile intre ele. Pentru a adauga borduri si a face tabelul mai lizibil, vei folosi CSS (proprietatile border si border-collapse) — pe care le vei invata in lectiile de CSS.

Tag-ul <th> (Table Header) defineste o celula de antet. Se foloseste pentru primul rand (sau prima coloana) al tabelului, acolo unde pui titlurile coloanelor: "Nume", "Materie", "Nota", "Pret" etc.

Diferenta vizuala fata de <td>: browserul afiseaza continutul unui <th> cu text bold (ingrosit) si centrat automat, fara CSS suplimentar. Aceasta ajuta utilizatorul sa identifice imediat care sunt titlurile coloanelor.

Pe langa aspectul vizual, <th> are si o semnificatie semantica: anuntul browserul si tehnologiile asistive (screen readers) ca acea celula este un antet, nu date obisnuite. Aceasta face tabelul mai accesibil si mai usor de inteles.

<table>
  <tr>
    <th>Elev</th>
    <th>Materie</th>
    <th>Nota</th>
  </tr>
  <tr>
    <td>Ionescu Maria</td>
    <td>Matematica</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Popescu Ion</td>
    <td>Informatica</td>
    <td>9</td>
  </tr>
</table>

In exemplul de mai sus, primul <tr> contine celule <th> (antetele "Elev", "Materie", "Nota"), iar urmatoarele <tr> contin celule <td> (datele efective). Aceasta structura este standard si se regaseste pe toate site-urile profesionale.

<th> poate fi folosit si pentru antetele de linii (prima coloana), nu doar de coloane. De exemplu, intr-un tabel cu orarul saptamanal, zilele saptamanii (Luni, Marti...) pot fi celule <th> pe prima coloana, indicand ca sunt etichete pentru fiecare rand.

Un tabel bine structurat separa antetul (randul cu titlurile coloanelor) de corpul (randurile cu datele efective). Aceasta separare se face cu doua tag-uri suplimentare:

• <thead> (Table Head) — grupeaza randurile de antet
• <tbody> (Table Body) — grupeaza randurile de date

Exista si un al treilea tag, <tfoot> (Table Footer), pentru randurile de subsol (de exemplu un rand cu totaluri sau note de subsol). Nu este obligatoriu, dar este util pentru tabele cu totaluri.

<table>
  <thead>
    <tr>
      <th>Materie</th>
      <th>Luni</th>
      <th>Marti</th>
      <th>Miercuri</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ora 1</td>
      <td>Matematica</td>
      <td>Romana</td>
      <td>Informatica</td>
    </tr>
    <tr>
      <td>Ora 2</td>
      <td>Fizica</td>
      <td>Matematica</td>
      <td>Engleza</td>
    </tr>
  </tbody>
</table>

De ce sa folosesti <thead> si <tbody>? In primul rand, pentru semantica: spui explicit browserului care randuri sunt titluri si care sunt date. In al doilea rand, pentru stilizare CSS: poti aplica un stil diferit pe thead (fundal inchis, text alb) fata de tbody (randuri alternante gri/alb) cu selectori CSS simpli. In al treilea rand, pentru accesibilitate: cititorii de ecran pot naviga mai usor prin tabel.

Chiar daca <thead> si <tbody> sunt optionale (tabelul functioneaza si fara ele), ele sunt considerate buna practica in dezvoltarea web profesionala si sunt recomandate de standardele HTML5.

In tabele complexe, uneori ai nevoie ca o celula sa se intinda pe mai multe coloane sau pe mai multe randuri. Exact asa cum in Excel selectezi mai multe celule si le "mergi" (Merge Cells). In HTML se face cu doua atribute:

• colspan (column span) — intinde celula pe mai multe coloane (pe orizontala)
• rowspan (row span) — intinde celula pe mai multe randuri (pe verticala)

<!-- colspan: titlu care acopera 3 coloane -->
<table>
  <thead>
    <tr>
      <th colspan="3">Rezultate Olimpiada 2025</th>
    </tr>
    <tr>
      <th>Elev</th>
      <th>Materie</th>
      <th>Premiu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana Pop</td>
      <td>Matematica</td>
      <td>Locul I</td>
    </tr>
  </tbody>
</table>

<!-- rowspan: prima celula ocupa 2 randuri -->
<table>
  <tbody>
    <tr>
      <td rowspan="2">Clasa VIII-A</td>
      <td>Matematica</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Romana</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Atentie: cand folosesti rowspan, randul urmator trebuie sa aiba cu o celula mai putin, deoarece celula extinsa "ocupa" deja acel spatiu. O greseala frecventa a incepatorilor este sa puna celula si in randul urmator, ceea ce strica alinierea tabelului.

Gandeste-te la colspan si rowspan ca la cioburi de puzzle care ocupa spatiul mai multor piese: daca un ciob ocupa 2 locuri, nu mai poti pune alt ciob in locurile acelea. Acelasi principiu se aplica la celulele de tabel unite.

Tag-ul <caption> adauga o legenda (titlu descriptiv) unui tabel. Aceasta legenda apare automat centrata deasupra tabelului si descrie ce contine tabelul, ajutand utilizatorii sa inteleaga scopul datelor inainte de a le citi.

<table>
  <caption>Orar Clasa a VIII-A - Semestrul II 2025</caption>
  <thead>
    <tr>
      <th>Ora</th>
      <th>Luni</th>
      <th>Marti</th>
      <th>Miercuri</th>
      <th>Joi</th>
      <th>Vineri</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 (8:00-8:50)</td>
      <td>Matematica</td>
      <td>Romana</td>
      <td>Informatica</td>
      <td>Fizica</td>
      <td>Engleza</td>
    </tr>
    <tr>
      <td>2 (9:00-9:50)</td>
      <td>Romana</td>
      <td>Informatica</td>
      <td>Matematica</td>
      <td>Engleza</td>
      <td>Biologie</td>
    </tr>
  </tbody>
</table>

<caption> se plaseaza imediat dupa tag-ul de deschidere <table>, inainte de <thead>. Cu CSS poti schimba pozitia legendei (deasupra sau dedesubt cu caption-side: bottom) si stilul ei.

Din perspectiva accesibilitatii, <caption> este echivalentul tag-ului alt de la imagini: ofera context utilizatorilor care folosesc cititori de ecran. Fara caption, un utilizator nevazator aude "tabel cu 6 coloane" — cu caption aude "Orar Clasa a VIII-A, tabel cu 6 coloane", mult mai informativ.

Un alt mod de a asocia un titlu cu tabelul este prin atributul aria-labelledby, care face referire la un <h2> sau alt element de titlu din pagina. Ambele metode sunt acceptate si se aleg in functie de contextul paginii.