Tabelle HTML

Le tabelle in HTML sono uno strumento essenziale per organizzare e visualizzare dati in modo chiaro e ordinato.

In questo articolo, esamineremo la struttura di base delle tabelle utilizzando i tag <table>, <thead>, <tbody>, <tr>, <th>, e <td>. Inoltre, esploreremo l’uso degli attributi colspan e rowspan per creare tabelle complesse e altamente strutturate.

Struttura di base della tabella: fondamenta solide

La struttura di base di una tabella coinvolge diversi elementi chiave:

<table>
  <thead>
    <tr>
      <th>Intestazione Colonna 1</th>
      <th>Intestazione Colonna 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Riga 1, Colonna 1</td>
      <td>Riga 1, Colonna 2</td>
    </tr>
    <tr>
      <td>Riga 2, Colonna 1</td>
      <td>Riga 2, Colonna 2</td>
    </tr>
  </tbody>
</table>

• Tag <table>: Definisce la tabella nel suo complesso.
• Tag <thead>: Contiene l’intestazione della tabella.
• Tag <tbody>: Contiene il corpo della tabella.
• Tag <tr>: Rappresenta una riga della tabella.
• Tag <th>: Intestazione della colonna, solitamente in grassetto.
• Tag <td>: Cella di dati nella tabella.

Attributi colspan e rowspan: unire ed espandere

Gli attributi colspan e rowspan consentono di combinare o espandere celle su più colonne o righe.

Esempio di colspan:

<tr>
  <td colspan="2">Questa cella copre due colonne</td>
</tr>

Esempio di rowspan:

<tr>
  <td rowspan="2">Questa cella copre due righe</td>
  <td>Riga 1, Colonna 2</td>
</tr>
<tr>
  <td>Riga 2, Colonna 2</td>
</tr>

Esempi pratici e utilizzo avanzato

Tabella con Celle Combinate e Dati Complessi:

<table>
  <thead>
    <tr>
      <th colspan="2">Informazioni Utente</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Foto</td>
      <td>Nome: John Doe</td>
    </tr>
    <tr>
      <td>Email: john@example.com</td>
    </tr>
  </tbody>
</table>

Tabella di Moltiplicazione con colspan e rowspan:

<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="9">Moltiplicatore</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="9">Moltiplicando</th>
      <td>1</td>
      <td>2</td>
      <!-- ... altre colonne ... -->
    </tr>
    <!-- ... altre righe ... -->
  </tbody>
</table>

Conclusioni: costruire tabelle significative e complesse

Le tabelle in HTML sono uno strumento potente per organizzare dati in modo visivamente chiaro e comprensibile.

Con una solida comprensione della struttura di base utilizzando <table>, <thead>, <tbody>, <tr>, <th>, e <td>, insieme alla padronanza degli attributi colspan e rowspan, hai la capacità di creare tabelle significative e complesse.