Guida alle tabelle HTML: Come funzionano e come crearle

Le tabelle in HTML sono utilizzate per organizzare e visualizzare i dati in modo tabulare. Una tabella ￨ composta da righe (tag <tr>) e colonne (tag <td> per i dati regolari e <th> per gli header).

Ecco come funzionano le tabelle in HTML:

1. Creazione della tabella: La tabella viene creata utilizzando il tag <table>. All'interno di questo tag, vengono inserite le righe (<tr>) che rappresentano le diverse righe della tabella.

2. Aggiunta di colonne: All'interno di ogni riga, vengono inseriti i tag <td> o <th>. Ogni tag rappresenta una cella della tabella. Il tag <th> viene utilizzato per le celle dell'intestazione.

3. Unione delle celle: Le celle possono essere unite in colonne o righe utilizzando gli attributi colspan e rowspan. Ad esempio, colspan='2' unisce due celle in una singola colonna.

4. Stile della tabella: ￈ possibile applicare stili CSS alle tabelle per personalizzarne l'aspetto, come il colore di sfondo, i bordi, la larghezza delle colonne, ecc. Ci￲ pu￲ essere fatto tramite l'attributo style o tramite un file CSS esterno.

5. Intestazione della tabella: L'intestazione della tabella pu￲ essere aggiunta utilizzando il tag <thead>. Questo consente di separare l'intestazione dal corpo della tabella.

6. Corpo della tabella: Il corpo della tabella pu￲ essere aggiunto utilizzando il tag <tbody>. Questo consente di separare il corpo della tabella dall'intestazione.

7. Piede della tabella: Il piede della tabella pu￲ essere aggiunto utilizzando il tag <tfoot>. Questo consente di aggiungere una riga di riepilogo alla fine della tabella.

Esempio di codice HTML per una tabella semplice:

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mario</td>
      <td>Rossi</td>
    </tr>
    <tr>
      <td>Luigi</td>
      <td>Bianchi</td>
    </tr>
  </tbody>
</table>

Questo esempio crea una tabella con due colonne (Nome e Cognome) e due righe di dati.