Tabele în HTML: un ghid pentru crearea și formatarea tabelelor în HTML

Un tabel este o componentă esențială în HTML pentru afișarea datelor într-un format structurat cu rânduri și coloane. În HTML, tabelele sunt create folosind etichetele <table>, <tr> și <td>.

Eticheta <table> reprezintă containerul tabelului principal, care conține toate rândurile și coloanele. Rândurile sunt definite folosind eticheta <tr>(rând de tabel), în timp ce celulele din rânduri sunt definite folosind eticheta <td>(date de tabel). În plus, puteți utiliza eticheta <th>(antet tabel) pentru a defini celulele antet pentru tabel.

Puteți utiliza atribute precum colspan și rowspan pentru a îmbina celulele din tabel sau pentru a extinde celulele pe mai multe rânduri și coloane. În plus, puteți aplica proprietăți CSS pentru a personaliza aspectul și aspectul tabelului.

Tabel( <table>)

- <table> Elementul este folosit pentru a crea un tabel în HTML.

- Datele sunt plasate în rânduri( <tr>) și coloane( <td> sau <th>).

- Fiecare celulă de date este plasată în elemente <td>(celula de date) sau <th>(celula antet).

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Antetul coloanei( <th>)

- <th> Elementul este folosit pentru a crea anteturi de coloană într-un tabel.

- Plasat de obicei în primul rând al tabelului.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

Rânduri de date( <tr>):

- <tr> Elementul este folosit pentru a crea rânduri de date într-un tabel.

- Celulele de date( <td>) sau celulele antet( <th>) sunt plasate în aceste <tr> elemente.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

Întinderea coloanelor( colspan)

Atributul colspan este utilizat pentru a determina numărul de coloane pe care o celulă de date sau o celulă antet le va cuprinde în tabel.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

Întinderea rândurilor( rowspan)

Atributul rowspan este utilizat pentru a determina numărul de rânduri pe care o celulă de date sau o celulă antet le va cuprinde în tabel.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

Îmbinarea celulelor( colspan și rowspan)

Puteți combina ambele colspan și rowspan atributele pentru a îmbina celulele dintr-un tabel.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

border proprietate

- border Proprietatea specifică grosimea chenarului tabelului.

- Valoarea lui border este un număr întreg nenegativ.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

cellpadding proprietate

-, cellpadding Proprietatea specifică distanța dintre conținutul celulei și chenarul celulei din tabel.

- Valoarea lui cellpadding este un număr întreg nenegativ

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

cellspacing proprietate

- cellspacing Proprietatea specifică distanța dintre celule din tabel.

- Valoarea lui cellspacing este un număr întreg nenegativ.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

Aceste atribute și elemente vă permit să creați și să personalizați tabele în HTML în funcție de nevoile dvs. Le puteți folosi pentru a afișa datele într-un mod clar și organizat pe site-ul dvs.