Utiliser des tableaux

Chapitre 6 • Tableaux en HTML

Les tableaux en HTML sont conçus pour présenter des données tabulaires de manière structurée et accessible.

Cas d'utilisation typiques :

Données comparatives : Comparer des caractéristiques entre plusieurs éléments
Horaires et plannings : Afficher des créneaux horaires ou des emplois du temps
Résultats statistiques : Présenter des données chiffrées organisées
Listes de prix : Comparer des tarifs ou des fonctionnalités
Classements : Afficher des résultats sportifs ou des rankings

Attention !

Les tableaux ne doivent pas être utilisés pour :

La mise en page générale du site (préférer CSS Grid/Flexbox)
Créer des colonnes de texte
Positionner des éléments décoratifs

Cette pratique était courante dans les années 2000 mais est aujourd'hui obsolète et nuisible à l'accessibilité.

Exemple valide

Un tableau de prix comparant différentes offres

Offre	Prix	Stockage
Basique	9,99€	50GB

Exemple à éviter

Utiliser un tableau pour mettre en page un header de site

Logo

Recherche

La balise <table>

Chapitre 6 • Tableaux en HTML

La balise <table> est l'élément conteneur qui définit un tableau en HTML.

<table>
    <!-- Contenu du tableau -->
</table>

Attributs importants :

border : Définit la bordure (obsolète, utiliser CSS à la place)
width : Largeur du tableau (préférer CSS)
summary : Description pour l'accessibilité (obsolète en HTML5)
aria-describedby : Alternative moderne à summary

En HTML5, la plupart des attributs de présentation sont dépréciés au profit du CSS.

Structure de base

Un tableau HTML bien formé contient généralement :

Un élément <caption> (optionnel) pour le titre
Des en-têtes <th> pour identifier les colonnes
Des lignes <tr> contenant des cellules <td>

Exemple complet

<table>
    <caption>Liste des participants</caption>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
    </tr>
    <tr>
        <td>Marie</td>
        <td>28</td>
    </tr>
</table>

Les lignes <tr>

Chapitre 6 • Tableaux en HTML

La balise <tr> (Table Row) définit une ligne dans un tableau HTML.

<table>
    <tr>
        <!-- Cellules de la ligne -->
    </tr>
</table>

Caractéristiques :

Chaque <tr> contient un ou plusieurs <td> ou <th>
Les lignes sont affichées dans l'ordre où elles sont définies
On peut styliser des lignes spécifiques avec CSS
Les attributs visuels (comme bgcolor) sont obsolètes

Exemple avec plusieurs lignes

Code HTML

<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>

Résultat

Ligne 1, Cellule 1	Ligne 1, Cellule 2
Ligne 2, Cellule 1	Ligne 2, Cellule 2

Bonnes pratiques

Garder le même nombre de cellules dans chaque ligne (sauf pour les colspan/rowspan)
Utiliser des sélecteurs CSS comme tr:nth-child(even) pour le style alterné
Ajouter des attributs ARIA pour les tableaux complexes (aria-rowindex)

Les cellules <td>

Chapitre 6 • Tableaux en HTML

La balise <td> (Table Data) définit une cellule standard dans un tableau HTML.

<tr>
    <td>Contenu de la cellule</td>
</tr>

Attributs utiles :

colspan : Étend la cellule sur plusieurs colonnes
rowspan : Étend la cellule sur plusieurs lignes
headers : Associe la cellule à des en-têtes spécifiques

Exemples d'utilisation

Cellule simple

<td>Donnée</td>

Fusion de colonnes

<td colspan="2">Sur 2 colonnes</td>

Fusion de lignes

<td rowspan="2">Sur 2 lignes</td>

Erreurs courantes

Oublier de fermer la balise <td>
Mettre du contenu directement dans <tr> sans <td>
Utiliser des colspan/rowspan qui déséquilibrent le tableau

Contenu des cellules

Une cellule <td> peut contenir :

Texte simple
Autres balises HTML (images, liens, listes...)
D'autres tableaux (imbrication)
Éléments interactifs (boutons, formulaires...)

Les en-têtes <th>

Chapitre 6 • Tableaux en HTML

La balise <th> (Table Header) définit une cellule d'en-tête dans un tableau HTML.

<tr>
    <th>Nom de la colonne</th>
</tr>

Caractéristiques :

Par défaut, le texte est en gras et centré
Améliore l'accessibilité pour les lecteurs d'écran
Peut être utilisé pour les en-têtes de ligne ou de colonne
Peut aussi utiliser colspan/rowspan comme <td>

Exemples d'en-têtes

En-têtes de colonne

<tr>
    <th>Nom</th>
    <th>Âge</th>
</tr>

En-têtes de ligne

<tr>
    <th>Mois</th>
    <td>Janvier</td>
</tr>

Accessibilité

Pour les tableaux complexes, utilisez ces attributs :

scope="col" pour les en-têtes de colonne
scope="row" pour les en-têtes de ligne
id et headers pour relier les cellules aux en-têtes

Le titre <caption>

Chapitre 6 • Tableaux en HTML

La balise <caption> fournit un titre ou une légende pour un tableau HTML.

<table>
    <caption>Liste des employés par département</caption>
    <!-- Contenu du tableau -->
</table>

Bonnes pratiques :

Placez <caption> juste après la balise <table>
Gardez le texte concis mais descriptif
Utilisez CSS pour styliser le caption si nécessaire
Évitez d'utiliser des éléments de mise en forme dans le caption

Exemple complet

Tableau avec caption

Résultats du tournois d'échecs 2023
Joueur	Points
Alice	15
Bob	12

À savoir

Bien que <caption> soit optionnel, il est fortement recommandé pour :

Améliorer l'accessibilité
Fournir un contexte aux moteurs de recherche
Aider les utilisateurs à comprendre le tableau hors contexte

Exemples pratiques

Chapitre 6 • Tableaux en HTML

Voici des cas concrets d'utilisation des tableaux en HTML.

Emploi du temps

<table>
    <caption>Emploi du temps</caption>
    <tr>
        <th>Heure</th>
        <th>Lundi</th>
        <th>Mardi</th>
    </tr>
    <tr>
        <td>9h-11h</td>
        <td>Maths</td>
        <td>Français</td>
    </tr>
</table>

Comparatif de produits

<table>
    <caption>Comparatif smartphones</caption>
    <tr>
        <th>Modèle</th>
        <th>Prix</th>
        <th>Écran</th>
    </tr>
    <tr>
        <td>Phone X</td>
        <td>599€</td>
        <td>6.1"</td>
    </tr>
</table>

Tableau complexe

<table>
    <caption>Statistiques</caption>
    <tr>
        <th rowspan="2">Année</th>
        <th colspan="2">Ventes</th>
    </tr>
    <tr>
        <th>Europe</th>
        <th>Amérique</th>
    </tr>
    <tr>
        <td>2022</td>
        <td>1500</td>
        <td>2000</td>
    </tr>
</table>

Astuces CSS

Pour améliorer l'apparence de vos tableaux :

Utilisez border-collapse: collapse pour des bordures propres
Ajoutez :hover sur les lignes pour un effet interactif
Utilisez nth-child() pour des lignes alternées
Ajoutez du padding aux cellules pour l'espacement

Erreurs fréquentes

Chapitre 6 • Tableaux en HTML

Structure incorrecte

<table>
    <td>Cellule sans ligne</td>
</table>

Problème : Les cellules doivent être dans des lignes <tr>

Mise en page avec tableaux

<table>
    <tr>
        <td>Header</td>
    </tr>
    <tr>
        <td>Contenu</td>
    </tr>
</table>

Problème : Utiliser un tableau pour la mise en page globale

Accessibilité négligée

<table>
    <tr>
        <td>Nom</td>
        <td>Âge</td>
    </tr>
</table>

Problème : Pas d'en-têtes <th> pour identifier les colonnes

Solutions et bonnes pratiques

Validation : Toujours vérifier la structure avec le validateur W3C
Accessibilité : Utiliser <th>, <caption> et attributs ARIA
Sémantique : Réserver les tableaux aux données tabulaires
Style : Utiliser CSS plutôt que des attributs obsolètes comme border

En résumé

Chapitre 6 • Tableaux en HTML

Balise <table>

Conteneur principal pour créer un tableau

Balise <tr>

Définit une ligne dans le tableau

Balise <td>

Cellule standard avec les données

Balise <th>

Cellule d'en-tête pour les colonnes/lignes

Les tableaux en HTML sont des outils puissants pour organiser et présenter des données structurées. En maîtrisant les balises <table>, <tr>, <td> et <th>, ainsi que les bonnes pratiques d'accessibilité, vous pouvez créer des tableaux clairs et efficaces. N'oubliez pas que les tableaux doivent être réservés aux données tabulaires et ne pas être utilisés pour la mise en page générale. Dans le prochain chapitre, nous aborderons les formulaires HTML.