Tabele CSS. Bordurile tabelelor. Elementele tabel, th și td. Reducere margini tabel.

Tabele CSS

Aspectul unui tabel HTML poate fi îmbunătățit mult cu CSS.

Bordurile tabelelor

Pentru a specifica bordurile tabelelor în CSS, utilizați proprietatea border.

Exemplul de mai jos specifică o bordură neagră pentru elementele <tabel>, <th> și <td>:


Exemplu:

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

Observați că tabelul din exemplul de mai sus are margini duble. Acest lucru se datorează faptului că atât tabelul, cât și elementele <th> și <td> au chenare separate.

Reduceți marginile tabelului (Collapse Table Borders)

Proprietatea border-collapse stabilește dacă bordurile tabelului trebuie să fie prăbușite într-un singur chenar:



Exemplu: 

table {
  border-collapse: collapse;
}

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

Dacă doriți doar un chenar în jurul tabelului, specificați numai proprietatea border pentru <tabel>:



Exemplu:

table {
  border: 1px solid black;
}