Tabele HTML: Structurare și Stilizare (Curs HTML și CSS pentru începători, partea 9)

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:

  1. <table>: Elementul principal care înconjoară întregul tabel.
  2. <tr>: Table Row – definește un rând în tabel.
  3. <td>: Table Data – definește o celulă de date în tabel.
  4. <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:

  1. Utilizați <caption> pentru a oferi un titlu tabelului:
<table>
  <caption>Lista angajaților</caption>
  <!-- conținutul tabelului -->
</table>
Lista angajaților
  1. 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
  1. Pentru tabele complexe, utilizați atributele id și headers:
<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>
Program de lucru
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;
}
Program de lucru
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.


Comentarii

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *