Creazione di tabelle

6.1 Elementi table e tr

Le tabelle in HTML vengono utilizzate per organizzare i dati in un formato tabellare. I principali tag utilizzati per creare le tabelle includono <table>, <tr>, e <td>. Andiamo a vedere ciascuno di essi più nel dettaglio.

<table>

Il tag <table> è il contenitore per l'intera tabella. All'interno ci sono le righe della tabella, ciascuna delle quali è definita con il tag <tr>.

Esempio di utilizzo:

    
      <table>
        <!-- righe e celle della tabella saranno aggiunte qui -->
      </table>
    
  

Tag <tr> (table row)

Il tag <tr> indica una riga della tabella. All'interno del tag <tr> si trovano le celle della tabella, ciascuna delle quali viene definita con il tag <td> o <th>.

Esempio di utilizzo:

    
      <table>
        <tr>
          <!-- le celle della riga saranno aggiunte qui -->
        </tr>
      </table>
    
  

6.2 Elementi td e th

Tag <td> (table data)

Il tag <td> viene utilizzato per definire una cella di dati in una riga della tabella. Queste celle contengono i dati della tabella e si trovano all'interno della riga, definita dal tag .

Esempio di utilizzo:

    
      <table>
        <tr>
          <td>Cella 1</td>
          <td>Cella 2</td>
          <td>Cella 3</td>
        </tr>
      </table>
    
  

Tag <th> (table head)

Il tag <th> viene utilizzato per definire le celle di intestazione della tabella. Il testo all'interno di <th> viene solitamente visualizzato in grassetto e centrato.

Esempio di utilizzo:

    
      <table>
        <tr>
          <th>Intestazione 1</th>
          <th>Intestazione 2</th>
          <th>Intestazione 3</th>
        </tr>
      </table>
    
  

Esempio di una tabella:

    
      <table>
        <tr>
          <th>Nome</th> <th>Età</th> <th>Città</th>
        </tr>
        <tr>
          <td>Ivan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Francoforte</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Parigi</td>
        </tr>
      </table>
    
  

6.3 Stile delle tabelle

Le tabelle devono assolutamente essere stilizzate con CSS — questo aumenta notevolmente la chiarezza e la leggibilità dei dati.

Ad esempio, hai deciso di aggiungere un bordo ad ogni cella: buona idea, ma siccome il bordo è presente in ogni cella, ora ogni due celle sono separate da un doppio bordo — uno per ciascuna cella. 🤦‍♂️

Se vuoi che il bordo appaia come desideri, hai bisogno di unire i bordi adiacenti con CSS. Per questo c'è una proprietà speciale — border-collapse.

Ecco un buon esempio di stile per la nostra tabella:

    
      <table>
        <tr>
          <th>Nome</th> <th>Età</th> <th>Città</th>
        </tr>
        <tr>
          <td>Ivan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Francoforte</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Parigi</td>
        </tr>
      </table>
    
  

    
      table {
        width: 50%; /* Imposta la larghezza della tabella */
        border-collapse: collapse; /* Rimuove i bordi doppi tra le celle */
      }

      th, td {
        border: 1px solid black; /* Imposta un bordo per le celle */
        padding: 8px; /* Aggiunge spazio dentro le celle */
        text-align: left; /* Allinea il testo a sinistra */
      }

      th {
        background-color: #f2f2f2; /* Imposta il colore di sfondo per le intestazioni */
      }
    
  

Qui vediamo che:

• Ogni cella ha un bordo di 1 pixel di colore nero
• I bordi doppi tra le celle sono stati rimossi
• Ogni cella ha dei rientri interni per evitare che il testo tocchi i bordi
• Le celle dell'intestazione hanno un colore di sfondo separato

Bello!