Tabelele în HTML sunt folosite pentru a organiza date într-un format de rânduri și coloane. Acestea pot fi utile pentru afișarea datelor structurate, cum ar fi programul unei conferințe sau detalii despre produse într-un magazin online.
NOTA: Tabel sau Tablou se folosesc alternativ cu referire la <table>.
Iată o explicație mai detaliată despre cum funcționează tabelele în HTML:
Elementele cheie ale tabelelor HTML:
<table>
: Acesta este elementul de bază care înconjoară întreaga tabelă.<tr>
(TableRow): Acesta reprezintă un rând în tabel. Conținutul rândului este format din una sau mai multe celule (<td>
sau<th>
).<td>
(TableData): Acestea sunt celulele obișnuite din tabel, care conțin datele efective.<th>
(TableHeader): Acestea sunt utilizate pentru antetele de coloană sau rând, fiind de obicei boldate și pot conține titlurile coloanelor sau rândurilor.
Atributele cheie ale celulelor (<td>
și <th>
):
colspan
: Specifică câte coloane ar trebui să ocupe o celulă.rowspan
: Specifică câte rânduri ar trebui să ocupe o celulă.
Stilizarea tabelelor:
Tablourile pot fi stilizate folosind CSS pentru a oferi aspectul dorit. Aici sunt câteva proprietăți CSS pe care le poți utiliza pentru a stiliza tabelele:
border
: Stabilește grosimea chenarului celulelor.padding
: Adaugă spațiu în jurul conținutului celulelor.background-color
: Setează culoarea de fundal a celulelor.text-align
: Aliniază textul din celule pe stânga, centru sau dreapta.border-collapse
: Specifică modul în care chenarele celulelor se vor uni.
Tablouri responsive:
Pentru a face tablourile să fie mai prietenoase pentru dispozitivele mobile, poți utiliza tehnici CSS cum ar fi overflow
, scroll
, sau poți considera reorganizarea sau ascunderea anumitor date pe dispozitivele mici.
Exemple Practice HTML:
Foloseste butonul Testare sau Salveaza ca HTMl si deschide pagina in browser.Concluzie:
Tabelele HTML sunt un mod eficient de a organiza și afișa date într-un format structurat. Cu toate acestea, în designul modern al paginilor web, se recomandă utilizarea de alternative mai semantice, precum stilizarea div-urilor cu CSS sau utilizarea grid-urilor și flexbox-urilor pentru a crea structuri complexe.