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>

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>

Î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>

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>

2. 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>

3. 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>

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;
}

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>

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;
}

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.