Tableau HTML

Dès qu’on affiche un prix par forfait, un planning ou un comparatif de fonctionnalités, la question se pose : grille CSS ou balise <table> ? La réponse dépend de la nature des données : s’il existe une vraie relation ligne/colonne (chaque cellule répond à « quelle ligne, quelle colonne »), le tableau HTML est l’outil adapté, car il porte cette relation dans le balisage lui-même, pas seulement à l’écran.

Utilisation dans WordPress

Le bloc « Tableau » de l’éditeur génère justement un <table> avec <thead> et <tbody>, et propose une option « striped » pour alterner les couleurs de ligne en CSS. Attention : ce bloc ne doit pas servir à mettre en page un article (colonnes de texte côte à côte) — pour ça, WordPress propose le bloc « Colonnes », qui repose sur des <div> flexibles, pas sur des tableaux.

Exemple

<table>
  <thead>
    <tr><th scope="col">Forfait</th><th scope="col">Prix</th></tr>
  </thead>
  <tbody>
    <tr><td>Standard</td><td>9 €</td></tr>
  </tbody>
</table>

L’attribut scope="col" sur les <th> indique aux lecteurs d’écran à quelle colonne appartient chaque cellule.

Bon à savoir

• Sur mobile, un tableau large déborde souvent de l’écran : l’envelopper dans un conteneur avec overflow-x: auto évite la casse de mise en page.
• Un tableau n’a rien à voir avec une table de base de données malgré le vocabulaire commun : l’un est un affichage, l’autre un stockage.
• Sans <th> ni attribut scope, un tableau reste lisible visuellement mais devient difficile à parcourir pour un utilisateur de technologie d’assistance.