Tabele HTML. Definirea unui tabel HTML: table, tr, th, td. Adăugarea unui chenar cu border. Proprietatea CSS border-collapse

Definirea unui tabel HTML

Un tabel HTML este definit cu eticheta <table>.
Fiecare rând de tabel este definit cu eticheta <tr>. Un antet de tabel este definit cu eticheta <th>. În mod implicit, titlurile tabelelor sunt îngroșate și centrate. Un tabel de date / o celulă este definit cu eticheta <td>.

Exemplu:

<table style="width:100%">
  <tr>
    <th>Prenume</th>
    <th>Nume</th>
    <th>Vârsta</th>
  </tr>
  <tr>
    <td>Ion</td>
    <td>Popescu</td>
    <td>30</td>
  </tr>
  <tr>
    <tdAna</td>
    <td>Ionescu</td>
    <td>40</td>
  </tr>
</table>

Notă: Elementele <td> sunt containerele de date din tabel. Pot conține tot felul de elemente HTML; text, imagini, liste, alte tabele etc.

Tabel HTML - Adăugarea unui chenar

Dacă nu specificați un chenar (border) pentru tabel, acesta va fi afișat fără margini.
Un chenar este setat folosind proprietatea CSS border:

Exemplu:

table, th, td {
  border: 1px solid black;
}

Nu uitați să definiți chenare atât pentru tabel, cât și pentru celulele tabelului.

Tabel HTML - Collapsed Borders

Dacă doriți ca mai multe chenare sa se uneasca într-un singur chenar, adăugați proprietatea CSS border-collapse:

Exemplu:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Tabel HTML - Adding Cell Padding

Cell Padding specifică spațiul dintre conținutul celulei și marginile acesteia.
Dacă nu specificați padding, celulele tabelului vor fi afișate fără padding.
Pentru a seta padding, utilizați proprietatea CSS padding:

Exemplu:

th, td {
  padding: 15px;
}