Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Cumpara abonament!
Plateste cu PayPal

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

Partajeaza in Google Classroom

Partajeaza cu Google Classroom
Susține Lectii-Virtuale!

Memorator: Descriere video Descarcă PDF

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
Cumpara abonament
Plătește cu PayPal

Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă suport în vederea pregătirii pentru Evaluare Națională și Bacalaureat la Matematică, Fizică și Chimie. Lecțiile noastre sunt alcătuite din filme și exerciții și probleme cu tot cu rezolvări. Platforma noastră este o soluție ideală pentru școala online. Pentru facilitarea activității profesorilor în cadrul ecosistemului GSuite de la Google am implementat butonul Google Classroom. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Ne propunem să facilităm accesul la conținut educațional de calitate mai ales elevilor cu venituri mai modeste care nu își pemit meditații particulare. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

Parteneri

EduApps partener Lectii Virtuale UiPath partener Lectii Virtuale Scoala365 partener Lectii Virtuale CCD Galați partener Lectii Virtuale

2024 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni   Despre   Contact   Confidenţialitate   Cariere Parteneri