Créer un tableau en HTML

Qu'est-ce qu'un tableau HTML ?

Les tableaux HTML permettent d'organiser des données en lignes et colonnes. Ils sont particulièrement utiles pour présenter des informations structurées comme des horaires, des statistiques, des comparaisons de produits ou des résultats de recherche.

Étape 1 : La structure de base d'un tableau

Un tableau HTML commence toujours par la balise <table>. Voici les éléments pour créer un tableau simple :

<table>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Ville</th>
    </tr>
    <tr>
        <td>Marie</td>
        <td>28</td>
        <td>Paris</td>
    </tr>
    <tr>
        <td>Pierre</td>
        <td>35</td>
        <td>Lyon</td>
    </tr>
</table>

Explication des éléments

• <table> : L'élément conteneur qui englobe tout le tableau. C'est la structure principale qui regroupe toutes les lignes et cellules.
• <tr> (table row) : Définit une ligne dans le tableau. Chaque ligne contient des cellules qui peuvent être des en-têtes ou des données.
• <th> (table header) : Définit une cellule d'en-tête. Par défaut, le texte est en gras et centré. Les en-têtes sont importantes pour l'accessibilité car ils permettent aux lecteurs d'écran d'identifier la structure du tableau.
• <td> (table data) : Définit une cellule de données ordinaire. C'est là que vous placez le contenu principal de votre tableau.

Résultat

Étape 2 : Structurer avec thead, tbody et tfoot

Pour améliorer la sémantique et l'accessibilité de vos tableaux, il est recommandé d'utiliser les éléments de regroupement :

<table>
    <thead>
        <tr>
            <th>Produit</th>
            <th>Prix</th>
            <th>Quantité</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ordinateur</td>
            <td>899 €</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Souris</td>
            <td>29 €</td>
            <td>15</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td>20 articles</td>
        </tr>
    </tfoot>
</table>

Explication des éléments de regroupement

• <thead> : Regroupe les lignes d'en-tête du tableau. Cet élément aide les navigateurs et les lecteurs d'écran à identifier la section d'en-tête, ce qui est particulièrement utile pour les longs tableaux où l'en-tête peut être répété lors de l'impression.
• <tbody> : Contient le corps principal du tableau avec les données. Il permet de séparer clairement le contenu des données des en-têtes et du pied de page.
• <tfoot> : Définit le pied du tableau, généralement utilisé pour les totaux ou les résumés. Il peut être placé avant ou après le tbody dans le code, mais sera toujours affiché en bas du tableau.
• colspan : Attribut qui permet à une cellule de s'étendre sur plusieurs colonnes. Dans l'exemple, la cellule "Total" s'étend sur 2 colonnes.

Résultat

Étape 3 : Ajouter un caption pour l'accessibilité

L'élément <caption> fournit un titre descriptif pour votre tableau :

<table>
    <caption>Horaires d'ouverture de la bibliothèque</caption>
    <thead>
        <tr>
            <th>Jour</th>
            <th>Heures</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lundi - Vendredi</td>
            <td>9h00 - 18h00</td>
        </tr>
        <tr>
            <td>Samedi</td>
            <td>10h00 - 16h00</td>
        </tr>
        <tr>
            <td>Dimanche</td>
            <td>Fermé</td>
        </tr>
    </tbody>
</table>

Résultat

Étape 4 : Utiliser rowspan et colspan

Ces attributs permettent de fusionner des cellules horizontalement ou verticalement :

<table>
    <tr>
        <th rowspan="2">Nom</th>
        <th colspan="2">Contact</th>
    </tr>
    <tr>
        <th>Email</th>
        <th>Téléphone</th>
    </tr>
    <tr>
        <td>Sophie</td>
        <td>sophie@email.com</td>
        <td>01 23 45 67 89</td>
    </tr>
</table>

Explication

• rowspan="2" : La cellule s'étend sur 2 lignes verticalement
• colspan="2" : La cellule s'étend sur 2 colonnes horizontalement

Résultat

Bonnes pratiques pour l'accessibilité

• Utilisez toujours des éléments <th> pour les en-têtes de colonnes et de lignes
• Ajoutez un <caption> pour décrire le contenu du tableau
• Structurez vos tableaux avec <thead>, <tbody> et <tfoot>
• Utilisez l'attribut scope sur les <th> pour clarifier les relations (scope="col" ou scope="row")
• Évitez d'utiliser des tableaux pour la mise en page, réservez-les aux données tabulaires
• Assurez-vous que vos tableaux sont responsive et lisibles sur mobile