Regroupement de cellules sur plusieurs lignes et colonnes

Regroupement de cellules sur plusieurs lignes avec rowspan

L'attribut rowspan permet de regrouper une cellule sur plusieurs lignes. Vous pouvez spécifier le nombre de lignes à fusionner en utilisant la valeur de l'attribut.

Exemple :

<table>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Téléphone</th>
    </tr>
    <tr>
        <td rowspan="2">John Doe</td>
        <td>25</td>
        <td>123-456-7890</td>
    </tr>
    <tr>
        <td>USA</td>
        <td>john@example.com</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>234-567-8901</td>
    </tr>
</table>

Dans cet exemple, la cellule contenant le nom "John Doe" est fusionnée sur deux lignes en utilisant l'attribut rowspan="2". Cela permet de créer une cellule qui s'étend sur les deux lignes pour regrouper les informations liées à "John Doe".

Regroupement de cellules sur plusieurs colonnes avec colspan

L'attribut colspan permet de regrouper une cellule sur plusieurs colonnes. Vous pouvez spécifier le nombre de colonnes à fusionner en utilisant la valeur de l'attribut.

Exemple :

<table>
    <tr>
        <th>Nom</th>
        <th colspan="2">Informations</th>
        <th>Contact</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>Âge: 25</td>
        <td>Pays: USA</td>
        <td>123-456-7890</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td colspan="2">Âge: 30</td>
        <td>234-567-8901</td>
    </tr>
</table>

Dans cet exemple, la cellule "Informations" est fusionnée sur deux colonnes en utilisant l'attribut colspan="2". Cela permet de créer une cellule qui s'étend sur deux colonnes pour regrouper les informations liées.

Exemple

Voici un exemple illustrant à la fois l'utilisation de l'attribut rowspan et de l'attribut colspan dans un tableau :

<table>
    <tr>
        <th>Nom</th>
        <th>Informations</th>
        <th>Contact</th>
    </tr>
    <tr>
        <td rowspan="2">John Doe</td>
        <td>Âge: 25</td>
        <td rowspan="2">123-456-7890</td>
    </tr>
    <tr>
        <td>Pays: USA</td>
    </tr>
    <tr>
        <td colspan="2">Jane Smith</td>
        <td>234-567-8901</td>
    </tr>
</table>

Dans cet exemple, nous avons trois colonnes : "Nom", "Informations" et "Contact".

La première cellule de la colonne "Nom" est fusionnée sur deux lignes à l'aide de l'attribut rowspan="2". Cela permet d'afficher le nom "John Doe" sur deux lignes.

La deuxième cellule de la colonne "Informations" affiche l'âge de John Doe et la cellule de contact est également fusionnée sur deux lignes pour afficher le numéro de téléphone de John Doe.

Dans la dernière ligne, la cellule "Jane Smith" est fusionnée sur deux colonnes à l'aide de l'attribut colspan="2". Cela permet de créer une cellule qui s'étend sur deux colonnes pour afficher le nom "Jane Smith".

Cet exemple montre comment l'utilisation de rowspan et colspan peut être combinée pour créer des structures de tableau plus complexes et regrouper les informations de manière appropriée.

Ces attributs offrent une grande flexibilité pour la mise en forme de vos tableaux HTML, vous permettant de concevoir des présentations visuellement attrayantes et facilement compréhensibles.

Conclusion

Les attributs rowspan et colspan sont utiles pour regrouper des cellules sur plusieurs lignes ou colonnes dans un tableau HTML. Ils permettent de créer des structures de tableau plus complexes et flexibles.

En utilisant ces attributs de manière appropriée, vous pouvez organiser les données de manière plus claire et compréhensible pour les utilisateurs. Assurez-vous de planifier et de concevoir correctement la structure de votre tableau avant d'utiliser les attributs rowspan et colspan pour éviter toute confusion ou mauvaise interprétation des données.

Expérimentez avec ces attributs pour créer des tableaux plus dynamiques et adaptés à vos besoins spécifiques.