Tabelele HTML sunt instrumente puternice pentru prezentarea datelor structurate pe paginile web. Deși nu ar trebui folosite pentru layout-ul paginii, tabelele rămân esențiale pentru afișarea informațiilor tabulare într-un mod organizat și ușor de citit.
Structura de bază a unui tabel HTML
Un tabel HTML este compus din mai multe elemente cheie:
<table>
: Elementul principal care înconjoară întregul tabel.<tr>
: Table Row – definește un rând în tabel.<td>
: Table Data – definește o celulă de date în tabel.<th>
: Table Header – definește o celulă de antet.
Iată un exemplu simplu:
<table>
<tr>
<th>Antet 1</th>
<th>Antet 2</th>
</tr>
<tr>
<td>Date 1</td>
<td>Date 2</td>
</tr>
</table>
Antet 1 | Antet 2 |
---|---|
Date 1 | Date 2 |
Structuri avansate de tabel
Gruparea rândurilor
Puteți grupa rândurile în secțiuni logice folosind:
<thead>
: Pentru rândurile de antet<tbody>
: Pentru corpul principal al datelor<tfoot>
: Pentru rândurile de subsol (opțional)
Exemplu:
<table>
<thead>
<tr>
<th>Nume</th>
<th>Vârstă</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
<tr>
<td>Ion</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total persoane: 2</td>
</tr>
</tfoot>
</table>
Nume | Vârstă |
---|---|
Ana | 25 |
Ion | 30 |
Total persoane: 2 |
Îmbinarea celulelor
Puteți îmbina celule pe orizontală sau verticală folosind atributele colspan
și rowspan
:
<table>
<tr>
<th colspan="2">Informații Personale</th>
</tr>
<tr>
<td>Nume</td>
<td>Ana Popescu</td>
</tr>
<tr>
<td>Adresă</td>
<td>Str. Principală, Nr. 10</td>
</tr>
</table>
Informații Personale | |
---|---|
Nume | Ana Popescu |
Adresă | Str. Principală, Nr. 10 |
Accesibilitate în tabele
Pentru a îmbunătăți accesibilitatea tabelelor:
- Utilizați
<caption>
pentru a oferi un titlu tabelului:
<table>
<caption>Lista angajaților</caption>
<!-- conținutul tabelului -->
</table>
- Folosiți atributul
scope
pentru celulele de antet:
<table>
<tr>
<th scope="col">Nume</th>
<th scope="col">Vârstă</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
</table>
Nume | Vârstă |
---|---|
Ana | 25 |
- Pentru tabele complexe, utilizați atributele
id
șiheaders
:
<table>
<tr>
<th id="nume">Nume</th>
<th id="varsta">Vârstă</th>
<th id="oras">Oraș</th>
</tr>
<tr>
<td headers="nume">Ana</td>
<td headers="varsta">25</td>
<td headers="oras">București</td>
</tr>
</table>
Nume | Vârstă | Oraș |
---|---|---|
Ana | 25 | București |
Stilizarea tabelelor cu CSS
CSS poate îmbunătăți semnificativ aspectul tabelelor:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e9e9e9;
}
Nume | Vârstă | Oraș |
---|---|---|
Ana | 25 | București |
Acest CSS va crea un tabel cu borduri, culori alternative pentru rânduri și un efect de hover.
Tabele responsive
Pentru a face tabelele responsive pe dispozitive mobile, puteți folosi tehnica de înfășurare a tabelului într-un container cu overflow:
<div class="table-container">
<table>
<!-- conținutul tabelului -->
</table>
</div>
.table-container {
overflow-x: auto;
}
Pentru tabele cu multe coloane, puteți considera transformarea rândurilor în „cărți” pe ecrane mici:
@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin-bottom: 10px;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
font-weight: bold;
}
}
Acest CSS va transforma fiecare rând într-o „carte” pe ecrane mici, cu etichete pentru fiecare celulă.
Exemple practice
Tabel simplu cu stilizare de bază
HTML:
<table class="tabel-simplu">
<caption>Program de lucru</caption>
<thead>
<tr>
<th scope="col">Zi</th>
<th scope="col">Ore</th>
</tr>
</thead>
<tbody>
<tr>
<td>Luni</td>
<td>9:00 - 17:00</td>
</tr>
<tr>
<td>Marți</td>
<td>9:00 - 17:00</td>
</tr>
<tr>
<td>Miercuri</td>
<td>9:00 - 17:00</td>
</tr>
<tr>
<td>Joi</td>
<td>9:00 - 17:00</td>
</tr>
<tr>
<td>Vineri</td>
<td>9:00 - 16:00</td>
</tr>
</tbody>
</table>
Zi | Ore |
---|---|
Luni | 9:00 – 17:00 |
Marți | 9:00 – 17:00 |
Miercuri | 9:00 – 17:00 |
Joi | 9:00 – 17:00 |
Vineri | 9:00 – 16:00 |
CSS:
.tabel-simplu {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.tabel-simplu caption {
font-weight: bold;
margin-bottom: 10px;
}
.tabel-simplu th,
.tabel-simplu td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.tabel-simplu th {
background-color: #f2f2f2;
}
.tabel-simplu tr:nth-child(even) {
background-color: #f9f9f9;
}
.tabel-simplu tr:hover {
background-color: #e9e9e9;
}
Zi | Ore |
---|---|
Luni | 9:00 – 17:00 |
Marți | 9:00 – 17:00 |
Miercuri | 9:00 – 17:00 |
Joi | 9:00 – 17:00 |
Vineri | 9:00 – 16:00 |
Concluzie
Tabelele HTML sunt instrumente versatile pentru prezentarea datelor structurate. Prin utilizarea corectă a elementelor HTML și aplicarea stilizării CSS, puteți crea tabele atractive, accesibile și responsive. Amintiți-vă să folosiți tabelele doar pentru date tabulare și să luați în considerare accesibilitatea și responsivitatea în designul vostru.
Lasă un răspuns