dexblog.ro
HTML Toate tagurile HTML

, și în HTML

Tabele HTML 4.0+

Împarte tabelul în trei secțiuni semantice: antetul cu titlurile coloanelor, corpul cu datele și subsolul cu totalurile.

Sintaxă tag 
<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

Ce face <thead>, <tbody> și <tfoot>

Gruparea semantică a unui tabel ajută browserele, cititoarele de ecran și uneltele de tipărire.

<thead> conține rândul sau rândurile cu numele coloanelor. <tbody> conține datele propriu-zise (pot exista mai multe corpuri de tabel). <tfoot> conține rândul final de sume, totaluri sau concluzii.

Când un tabel lung este tipărit pe mai multe pagini de hârtie, browserele repetă automat <thead> și <tfoot> pe fiecare pagină tipărită.

Exemple

Exemplul 1: Factură simplă cu antet, conținut și total

Structura clară separă datele de totalul calculat.

<table>
  <thead>
    <tr><th>Serviciu</th><th>Ore</th><th>Total</th></tr>
  </thead>
  <tbody>
    <tr><td>Dezvoltare web</td><td>10</td><td>1500 lei</td></tr>
    <tr><td>Optimizare SEO</td><td>5</td><td>750 lei</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Total general</th><td>2250 lei</td></tr>
  </tfoot>
</table>

Ce afișează browserul

Serviciu | Ore | Total
Dezvoltare web | 10 | 1500 lei
Optimizare SEO | 5 | 750 lei
Total general: 2250 lei

Greșeli frecvente

  • Plasarea celulelor direct în thead sau tbody fără a le împacheta mai întâi într-un rând

    .

Comenzi înrudite

  • <table>: Containerul principal pentru afișarea datelor tabelare structurate pe rânduri și coloane.
  • <tr>: Definește un rând orizontal (table row) în interiorul unui tabel.
  • <th>: Celulă de antet într-un tabel: textul este afișat implicit îngroșat și centrat.
  • <td>: Celulă standard de date (table data) într-un tabel HTML.