Unione di celle in una tabella HTML

8.1 Unione di celle orizzontale

Unire le celle in una tabella ti permette di creare viste dati più flessibili e informative. È particolarmente utile quando vuoi combinare più celle per creare intestazioni o dati riepilogativi. In HTML, gli attributi colspan e rowspan sono usati per unire le celle.

Attributo colspan

L'attributo colspan unisce le celle orizzontalmente. Indica quanti colonne dovrebbe coprire una cella. Ad esempio, se hai una cella con colspan="2", coprirà lo spazio di due celle normali in una riga.

Esempio di utilizzo:

Immagina di avere una tabella con tre colonne e vuoi che la prima cella in una riga copra due colonne. Usi colspan="2" per unire queste due celle. È utile per creare intestazioni che coprono più colonne, o per unire dati che si riferiscono a più categorie.

    
      <table border="1">
        <tr>
          <th>Nome</th>
          <th>Età</th>
          <th>Città</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>Londra</td>
        </tr>
        <tr>
          <td colspan="2">Totale</td>
          <td>2 record</td>
        </tr>
      </table>
    
  

8.2 Unione di celle verticale

L'attributo rowspan unisce le celle verticalmente. Indica quanti righe dovrebbe coprire una cella. Ad esempio, se hai una cella con rowspan="2", occuperà lo spazio di due celle normali in una colonna.

Esempio di utilizzo:

Immagina di avere una tabella con tre righe e vuoi che la prima cella in una colonna copra due righe. Usi rowspan="2" per unire queste due celle. È utile per creare tabelle dove una categoria di dati si riferisce a più righe, come intestazioni unite o dati sommari.

    
      <table border="1">
        <tr>
          <th>Nome</th>
          <th>Progetto</th>
          <th>Città</th>
        </tr>
        <tr>
          <td rowspan="2">Alice</td>
          <td>Progetto A</td>
          <td>Londra</td>
        </tr>
        <tr>

          <td>Progetto B</td>
          <td>Batumi</td>
        </tr>
      </table>
    
  

8.3 Spiegazione del funzionamento

Come funzionano colspan e rowspan

Unione orizzontale (colspan): immagina di creare una tabella degli orari, dove un corso si tiene in diverse aule. Puoi unire le celle con colspan per indicare che un corso copre due orari.

Unione verticale (rowspan): immagina di creare una tabella dei risultati di una gara, dove un partecipante partecipa a più fasi. Puoi unire le celle con rowspan per indicare che un partecipante copre due fasi.

Esempi pratici

Creare intestazioni che coprono più colonne: se hai una tabella con diverse categorie di dati e vuoi creare un'intestazione che copre più colonne, usa colspan. Ad esempio, l'intestazione "Informazioni su dipendenti" può coprire le colonne "Nome", "Età" e "Dipartimento".

Unire dati verticalmente: se hai dati che devono essere uniti verticalmente, ad esempio, più record per la stessa persona o oggetto, usa rowspan. Ad esempio, se hai informazioni su un progetto e un progetto occupa più righe (come le fasi del progetto), unisci le righe con rowspan.

8.4 Esempi

Immagina di avere una tabella che mostra i dipendenti e la loro partecipazione a diversi progetti:

• Dipendenti: Ivan, Maria, Pietro.
• Progetti: Progetto A, Progetto B.

Vuoi unire le celle per mostrare che Ivan e Maria lavorano a due progetti contemporaneamente:

    
<table border="1">
    <tr>
        <th>Nome</th>
        <th>Progetto A</th>
        <th>Progetto B</th>
        <th>Città</th>
    </tr>
    <tr>
        <td>Ivan</td>
        <td colspan="2">Sì</td>
        <td>Londra</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td colspan="2">Sì</td>
        <td>Londra</td>
    </tr>
    <tr>
        <td>Pietro</td>
        <td>Sì</td>
        <th>No</th>
        <td>Roma</td>
    </tr>
</table>
    
  

O, se vuoi mostrare che Ivan lavora su due progetti:

    
      <table border="1">
        <tr>
          <th>Nome</th>
          <th>Progetto</th>
          <th>Città</th>
        </tr>
        <tr>
          <td rowspan="2">Ivan</td>
          <td>Progetto A</td>
          <td>Londra</td>
        </tr>
        <tr>
          <!-- vuoto -->
          <td>Progetto B</td>
          <td>Londra</td>
        </tr>
        <tr>
          <td>Sergio</td>
          <td>Progetto C</td>
          <td>Roma</td>
        </tr>
      </table>
    
  

Ho messo appositamente un commento nel luogo della cella che è stata "mangiata" dall'espansione della cella vicina. Così è più chiaro, dove verranno visualizzati gli altri.