Tabele HTML. Definirea unui tabel HTML: table, tr, th, td. Adăugarea unui chenar cu border. Proprietatea CSS border-collapse
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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;
}