Fusionner les cellules de tableau en HTML

8.1 Fusionner les cellules horizontalement

Fusionner les cellules dans un tableau vous permet de créer des représentations de données plus flexibles et informatives. C'est particulièrement utile lorsque vous devez fusionner plusieurs cellules pour créer des en-têtes ou résumer des données. En HTML, les attributs colspan et rowspan sont utilisés pour fusionner les cellules.

Attribut colspan

L'attribut colspan fusionne les cellules horizontalement. Il indique combien de colonnes une cellule doit couvrir. Par exemple, si vous avez une cellule avec colspan="2", elle occupera la place de deux cellules ordinaires dans la ligne.

Exemple d'utilisation :

Imagine que tu as un tableau avec trois colonnes, et tu veux que la première cellule d’une ligne couvre deux colonnes. Tu utilises colspan="2" pour fusionner ces deux cellules. C'est utile pour créer des en-têtes qui couvrent plusieurs colonnes, ou pour fusionner des données qui concernent plusieurs catégories.

    
      <table border="1">
        <tr>
          <th>Nom</th>
          <th>Âge</th>
          <th>Ville</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>Londres</td>
        </tr>
        <tr>
          <td colspan="2">Total</td>
          <td>2 enregistrements</td>
        </tr>
      </table>
    
  

8.2 Fusionner les cellules verticalement

L'attribut rowspan fusionne les cellules verticalement. Il indique combien de lignes une cellule doit couvrir. Par exemple, si vous avez une cellule avec rowspan="2", elle occupera la place de deux cellules ordinaires dans la colonne.

Exemple d'utilisation :

Imagine que tu as un tableau avec trois lignes, et tu veux que la première cellule d’une colonne couvre deux lignes. Tu utilises rowspan="2" pour fusionner ces deux cellules. C'est utile pour créer des tableaux où une catégorie de données concerne plusieurs lignes, comme des en-têtes fusionnés ou des données sommaires.

    
      <table border="1">
        <tr>
          <th>Nom</th>
          <th>Projet</th>
          <th>Ville</th>
        </tr>
        <tr>
          <td rowspan="2">Alice</td>
          <td>Projet A</td>
          <td>Londres</td>
        </tr>
        <tr>

          <td>Projet B</td>
          <td>Batoumi</td>
        </tr>
      </table>
    
  

8.3 Explication du fonctionnement

Comment fonctionnent colspan et rowspan

Fusion horizontale (colspan) : imagine que tu crées un tableau d'emploi du temps où un cours se déroule dans plusieurs salles. Tu peux fusionner des cellules avec colspan pour indiquer qu’un seul cours couvre deux créneaux horaires.

Fusion verticale (rowspan) : imagine que tu crées un tableau de résultats de compétition où un participant participe à plusieurs étapes. Tu peux fusionner des cellules avec rowspan pour indiquer qu’un seul participant couvre deux étapes.

Exemples pratiques

Créer des en-têtes couvrant plusieurs colonnes : si tu as un tableau avec différentes catégories de données, et tu veux créer un en-tête qui couvre plusieurs colonnes, utilise colspan. Par exemple, un en-tête "Informations sur l' employé" peut couvrir les colonnes "Nom", "Âge" et "Département".

Fusionner des données verticalement : si tu as des données à fusionner verticalement, par exemple, plusieurs enregistrements pour la même personne ou le même objet, utilise rowspan. Par exemple, si tu as des informations sur un projet et qu’un projet occupe plusieurs lignes (comme les phases du projet), fusionne les lignes avec rowspan.

8.4 Exemples

Imagine que tu as un tableau montrant des employés et leur participation à différents projets :

• Employés : Ivan, Maria, Pierre.
• Projets : Projet A, Projet B.

Tu veux fusionner les cellules pour montrer qu'Ivan et Maria travaillent sur deux projets en même temps :

    
<table border="1">
    <tr>
        <th>Nom</th>
        <th>Projet A</th>
        <th>Projet B</th>
        <th>Ville</th>
    </tr>
    <tr>
        <td>Ivan</td>
        <td colspan="2">Oui</td>
        <td>Londres</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td colspan="2">Oui</td>
        <td>Londres</td>
    </tr>
    <tr>
        <td>Pierre</td>
        <td>Oui</td>
        <th>Non</th>
        <td>Rome</td>
    </tr>
</table>
    
  

Ou, si tu veux montrer qu'Ivan travaille sur deux projets :

    
      <table border="1">
        <tr>
          <th>Nom</th>
          <th>Projet</th>
          <th>Ville</th>
        </tr>
        <tr>
          <td rowspan="2">Ivan</td>
          <td>Projet A</td>
          <td>Londres</td>
        </tr>
        <tr>
          <!-- vide -->
          <td>Projet B</td>
          <td>Londres</td>
        </tr>
        <tr>
          <td>Serge</td>
          <td>Projet C</td>
          <td>Rome</td>
        </tr>
      </table>
    
  

J'ai placé expressément un commentaire à l'endroit de la cellule qui serait « mangée » par l'extension de la voisine. C'est plus clair pour comprendre où le reste sera affiché.