# Tableau HTML

> Structure de balisage composée de « table », « thead », « tbody » et « tr »/« td »/« th », conçue pour présenter des données tabulaires en lignes et colonnes liées.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/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.