Tabele HTML. Adăugarea unei legende cu eticheta <caption>. Stil special pentru un tabel cu atributul id.

Tabel HTML - Adăugarea unei legende ( Adding a Caption)

Pentru a adăuga o legendă la un tabel, utilizați eticheta <caption>:

Exemplu:

<table style="width:100%">
  <caption>Economii lunare</caption>
  <tr>
    <th>Luna</th>
    <th>Economii</th>
  </tr>
  <tr>
    <td>Ianuarie</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februarie</td>
    <td>$50</td>
  </tr>
</table>

Notă: Eticheta <caption> trebuie introdusă imediat după eticheta <table>.

Un stil special pentru un tabel

Pentru a defini un stil special pentru un tabel special, adăugați un atribut id la tabel:

Exemplu:

<table id="t01">
  <tr>
    <th>Prenume</th>
    <th>Nume</th>
    <th>Vârsta</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Popescu</td>
    <td>54</td>
  </tr>
</table>

Acum puteți defini un stil special pentru acest tabel:

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

Și adăugați mai multe stiluri:

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

Rezumat:

• Utilizați elementul HTML <table> pentru a defini un tabel.
• Utilizați elementul HTML <tr> pentru a defini un rând de tabel.
• Utilizați elementul HTML <td> pentru a defini datele unui tabel.
• Utilizați elementul HTML <th> pentru a defini un titlu de tabel.
• Utilizați elementul HTML <caption> pentru a defini o legendă de tabel.
• Utilizați proprietatea CSS border pentru a defini o bordură.
• Utilizați proprietatea CSS border-collapse pentru a restrânge marginile celulelor.
• Utilizați proprietatea CSS padding pentru a adăuga umplutură la celule.
• Utilizați proprietatea CSS text-align pentru a alinia textul celulelor.
• Utilizați proprietatea CSS border-spacing pentru a seta distanța dintre celule.
• Utilizați atributul colspan pentru a crea o celulă cu mai multe coloane.
• Utilizați atributul linespan pentru a face ca o celulă să aibă mai multe rânduri.
• Utilizați atributul id pentru a defini în mod unic o tabelă.

Etichete de tabel HTML
 

Etichetă	Descriere
<table>	Definește un tabel
<th>	Definește o celulă antet dintr-un tabel
<tr>	Definește un rând într-un tabel
<td>	Definește o celulă dintr-un tabel
<caption>	Definește o legendă de tabel
<colgroup>	Specifică un grup de una sau mai multe coloane dintr-un tabel pentru formatare
<col>	Specifică proprietățile coloanei pentru fiecare coloană dintr-un element
<thead>	Grupează conținutul antetului într-un tabel
<tbody>	Grupează conținutul corpului într-un tabel
<tfoot>	Grupează conținutul subsolului într-un tabel