Tabele HTML. Adăugarea unei legende cu eticheta . Stil special pentru un tabel cu atributul id.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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ă.
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 |