Les tableaux en HTML

Les tableaux sont un élément fondamental en HTML pour présenter des données structurées en lignes et en colonnes, comme des feuilles de calcul. Il est crucial de les utiliser pour leur but sémantique (afficher des données tabulaires) et non pour de la mise en page, rôle qui est dévolu au CSS.

La structure de base d’un tableau

Un tableau HTML est construit avec plusieurs balises qui s’imbriquent :

• <table> : La balise conteneur qui englobe tout le tableau.
• <tr> (table row) : Définit une ligne dans le tableau.
• <td> (table data) : Définit une cellule de données à l’intérieur d’une ligne.

Exemple simple

<table>
    <tr>
        <td>Ligne 1, Cellule 1</td>
        <td>Ligne 1, Cellule 2</td>
    </tr>
    <tr>
        <td>Ligne 2, Cellule 1</td>
        <td>Ligne 2, Cellule 2</td>
    </tr>
</table>

Note : Par défaut, les navigateurs n’affichent pas de bordures. Celles-ci sont ajoutées avec du CSS.

Les en-têtes de tableau (<th>)

Pour distinguer les en-têtes de colonnes ou de lignes des données classiques, on utilise la balise <th> (table head). Sémantiquement, cela indique que cette cellule est un titre pour les autres cellules de la colonne ou de la ligne.

Les navigateurs les affichent généralement en gras et centrées par défaut.

<table>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Dupont</td>
        <td>Jean</td>
        <td>35</td>
    </tr>
</table>

Structurer un tableau avec <thead>, <tbody> et <tfoot>

Pour des tableaux plus complexes, HTML fournit des balises pour grouper les différentes parties du tableau :

• <thead> : Regroupe les lignes d’en-tête du tableau.
• <tbody> : Regroupe les lignes contenant le corps des données du tableau.
• <tfoot> : Regroupe les lignes de pied de tableau (par exemple, pour des totaux).

Ces balises améliorent la sémantique, l’accessibilité et permettent au navigateur d’afficher l’en-tête et le pied de page sur chaque page lors de l’impression d’un long tableau.

<table>
    <thead>
        <tr>
            <th>Produit</th>
            <th>Quantité</th>
            <th>Prix Unitaire</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Livre</td>
            <td>2</td>
            <td>15 €</td>
        </tr>
        <tr>
            <td>Stylo</td>
            <td>10</td>
            <td>2 €</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td>50 €</td>
        </tr>
    </tfoot>
</table>

Fusionner des cellules avec colspan et rowspan

Il est parfois nécessaire qu’une cellule s’étende sur plusieurs colonnes ou plusieurs lignes.

• colspan : Attribut à placer sur un <td> ou <th> pour indiquer sur combien de colonnes la cellule doit s’étendre.
• rowspan : Attribut à placer sur un <td> ou <th> pour indiquer sur combien de lignes la cellule doit s’étendre.

Titre de tableau et accessibilité

Pour rendre les tableaux plus accessibles, notamment pour les lecteurs d’écran, il est essentiel d’ajouter un titre et de bien définir la portée des en-têtes.

• <caption> : Cette balise doit être le premier enfant de <table>. Elle fournit un titre descriptif pour le tableau.
• scope : Cet attribut sur les balises <th> précise si l’en-tête s’applique à une colonne (scope="col") ou à une ligne (scope="row"). Cela aide les technologies d’assistance à faire les bonnes associations.

Exemple complet et accessible

<table>
    <caption>Horaires d'ouverture hebdomadaires</caption>
    <thead>
        <tr>
            <th scope="col">Jour</th>
            <th scope="col">Matin</th>
            <th scope="col">Après-midi</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Lundi à Vendredi</th>
            <td>9h - 12h</td>
            <td>14h - 18h</td>
        </tr>
        <tr>
            <th scope="row">Samedi</th>
            <td colspan="2">Fermé</td>
        </tr>
        <tr>
            <th scope="row">Dimanche</th>
            <td colspan="2">Fermé</td>
        </tr>
    </tbody>
</table>