En-têtes de colonnes avec <th>

Pour définir les en-têtes de colonnes, vous pouvez utiliser la balise <th> à l'intérieur de la balise <thead>. Chaque balise <th> représente un en-tête de colonne. Vous pouvez utiliser l'attribut scope pour spécifier la portée de l'en-tête.

Exemple :

<table>
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
            <th scope="col">Pays</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>25</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>30</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>

Dans cet exemple, les balises <th> sont utilisées pour définir les en-têtes de colonnes "Nom", "Âge" et "Pays". L'attribut scope="col" est ajouté pour indiquer que les en-têtes sont liés aux colonnes.

En-têtes de lignes avec <th>

Pour définir les en-têtes de lignes, vous pouvez utiliser la balise <th> à l'intérieur de la balise <tbody> et à l'extérieur de la balise <tr> qui représente la ligne de données. Chaque balise <th> représente un en-tête de ligne. Vous pouvez utiliser l'attribut scope pour spécifier la portée de l'en-tête.

Exemple :

<table>
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
            <th scope="col">Pays</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">John Doe</th>
            <td>25</td>
            <td>USA</td>
        </tr>
        <tr>
            <th scope="row">Jane Smith</th>
            <td>30</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>

Dans cet exemple, les balises <th> sont utilisées pour définir les en-têtes de lignes "John Doe" et "Jane Smith". L'attribut scope="row" est ajouté pour indiquer que les en-têtes sont liés aux lignes.

Conclusion

La gestion des en-têtes de colonnes et de lignes dans les tableaux HTML est importante pour améliorer l'accessibilité et la compréhension des données. Les balises <th> et les attributs scope sont utilisés pour définir les en-têtes de manière appropriée.

En définissant correctement les en-têtes de colonnes et de lignes, vous facilitez la navigation et la compréhension des données pour les utilisateurs, en particulier ceux qui utilisent des technologies d'assistance.

Assurez-vous de choisir le bon attribut scope en fonction du contexte de l'en-tête (colonne ou ligne) pour garantir une structure de tableau claire et cohérente dans vos pages web.