Cum să creezi tabele HTML — ghid complet

In this tutorial, you'll learn about Cum să creezi tabele HTML. We cover key concepts, practical examples, and best practices.

Tabelele HTML sunt folosite pentru a afișa date structurate în rânduri și coloane — statistici, prețuri, orare, rapoarte financiare și multe altele.

The Problem

Tabelele HTML sunt adesea greșit structurate: se omit headerele, se confundă th cu td, sau se folosesc tabele pentru layout în loc de date tabulare.

The Wrong Way

<table>
  <tr>
    <td>Produs</td>
    <td>Preț</td>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>3500</td>
  </tr>
</table>

Probleme: Header-ele nu sunt marcate corect, tabelul nu are accesibilitate, iar datele nu sunt grupate semantic.

The Right Way

<table>
  <caption>Prețuri produse</caption>
  <thead>
    <tr>
      <th>Produs</th>
      <th>Preț (RON)</th>
      <th>Stoc</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>3500</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>1200</td>
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>4700</td>
      <td>35</td>
    </tr>
  </tfoot>
</table>

Step-by-Step Fix

1. Creează structura de bază

Fiecare tabel începe cu <table>. Rândurile se definesc cu <tr>, celulele header cu <th>, iar celulele de date cu <td>.

2. Grupează secțiunile tabelului

<thead>   <!-- antet -->
<tbody>   <!-- corpul principal -->
<tfoot>   <!-- subsol -->

3. Fuzionează celule cu rowspan și colspan

<tr>
  <td rowspan="2">Fuzionat pe verticală</td>
  <td colspan="2">Fuzionat pe orizontală</td>
</tr>
<tr>
  <td>Celulă 1</td>
  <td>Celulă 2</td>
</tr>

4. Adaugă titlu și accesibilitate

<caption>Vânzări trimestriale 2025</caption>

Prevention Tips

• Folosește <th> pentru antete cu scope="col" sau scope="row"
• Nu folosi tabele pentru layout — folosește CSS Flexbox sau Grid
• Adaugă border="1" sau CSS pentru vizibilitate temporară
• Folosește <caption> pentru descrierea tabelului

Common Mistakes

1. Tabele pentru layout — tabelele sunt pentru date, nu pentru aranjarea paginii
2. Header lipsă — primul rând trebuie să fie <th>, nu <td>
3. Fără scope — cititoarele de ecran nu pot asocia corect header-ele cu celulele
4. Nesting excesiv — tabele în tabele îngreunează citirea și mentenanța
5. Coloane nealiniate — numărul de celule pe rând trebuie să fie constant

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.