Tableaux de mise en page : pourquoi les éviter et comment les remplacer

Dans les années 2000, les tableaux HTML étaient le principal outil de mise en page web. Cette pratique, bien que largement abandonnée par les développeurs professionnels, persiste encore dans de nombreux sites, emails et CMS. Le rapport WebAIM Million 2025 a identifié près d'un million de tableaux, dont seulement 16,6% possèdent un balisage sémantique correct. Les autres ? Des tableaux de mise en page ou des tableaux de données mal structurés.

Comprendre la différence entre tableaux de données et tableaux de mise en page

Tableaux de données

Un tableau de données présente des informations structurées en lignes et colonnes avec une relation logique entre les cellules. Exemples :

• Comparatif de prix entre produits
• Calendrier d'événements
• Résultats sportifs
• Données statistiques

Ces tableaux nécessitent un balisage sémantique avec <th>, <caption>, et des attributs scope pour être accessibles.

Tableaux de mise en page

Un tableau de mise en page utilise la structure tabulaire uniquement pour positionner des éléments visuellement, sans relation logique entre les cellules. Cette technique date d'une époque où CSS offrait peu d'options de positionnement.

Pourquoi les tableaux de mise en page posent problème

1. Ordre de lecture altéré

Les lecteurs d'écran lisent le contenu dans l'ordre du code source (linéarisation). Avec un tableau de mise en page, cet ordre peut différer radicalement de l'ordre visuel souhaité.

Exemple problématique :

<table>
  <tr>
    <td>Sous-sol</td>
    <td>Toilettes</td>
    <td>Doivent</td>
  </tr>
  <tr>
    <td>Chasser</td>
    <td>Vers le</td>
    <td>Haut !</td>
  </tr>
</table>

Lecture visuelle attendue : "Sous-sol Toilettes Doivent Chasser Vers le Haut !"

Lecture par lecteur d'écran : "Sous-sol Chasser Toilettes Vers le Haut Doivent !" (par colonnes)

Cette inversion rend le message complètement incompréhensible.

2. Surcharge cognitive pour les utilisateurs d'assistance

Quand un lecteur d'écran détecte un tableau, il active un mode de navigation spécifique :

• Annonce du nombre de lignes et colonnes
• Propose une navigation cellule par cellule
• Cherche les en-têtes de colonnes et de lignes

Pour un tableau de mise en page, toutes ces fonctionnalités deviennent du bruit inutile qui complique la navigation.

3. Problèmes de responsive design

Les tableaux sont par nature rigides. Ils ne s'adaptent pas bien aux différentes tailles d'écran sans hacks complexes. Sur mobile, un tableau de mise en page peut :

• Déborder de l'écran
• Nécessiter un défilement horizontal
• Devenir illisible

4. Confusion entre mise en page et données

Si un développeur ajoute par erreur des balises <th> à un tableau de mise en page, le lecteur d'écran le traitera comme un tableau de données, créant une confusion maximale.

Comment identifier un tableau de mise en page ?

Posez-vous ces questions :

1. Les données ont-elles une relation logique en lignes ET en colonnes ?
2. Y a-t-il besoin d'en-têtes pour comprendre le contenu ?
3. Un tableur (Excel) serait-il le format naturel pour ces données ?

Si vous répondez "non" à ces questions, il s'agit probablement d'un tableau de mise en page qui devrait être remplacé par CSS.

Si vous devez conserver un tableau de mise en page

Dans certains cas (emails HTML, contraintes de CMS ancien), vous pourriez être contraint de conserver un tableau de mise en page. Voici comment le rendre moins problématique :

Ajouter le rôle ARIA "presentation"

<table role="presentation">
  <tr>
    <td>Contenu gauche</td>
    <td>Contenu droite</td>
  </tr>
</table>

L'attribut role="presentation" indique aux technologies d'assistance d'ignorer la sémantique de tableau et de lire le contenu de manière linéaire.

Règles à respecter

• Ne jamais utiliser <th>, <caption>, scope ou headers
• Éviter les cellules fusionnées (colspan, rowspan)
• S'assurer que l'ordre du code correspond à l'ordre de lecture logique

Les alternatives CSS modernes

CSS Flexbox

Idéal pour les mises en page unidimensionnelles (lignes OU colonnes) :

.conteneur {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.élément {
  flex: 1 1 300px; /* Flexible, responsive */
}

CSS Grid

Parfait pour les mises en page bidimensionnelles complexes :

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Avantages de CSS sur les tableaux

Auditer vos tableaux existants

Notre outil d'audit RGAA détecte automatiquement les tableaux et vérifie :

• La présence d'en-têtes (<th>) pour les tableaux de données
• L'attribut role="presentation" pour les tableaux de mise en page
• Les cellules vides non gérées
• Les problèmes de structure

Plan d'action pour migrer vos tableaux de mise en page

1. Inventaire : Identifiez tous les tableaux de votre site
2. Classification : Distinguez données et mise en page
3. Priorisation : Commencez par les pages à fort trafic
4. Migration : Remplacez par Flexbox ou Grid
5. Test : Vérifiez avec un lecteur d'écran

Conclusion

Les tableaux de mise en page sont un héritage d'une époque révolue du développement web. Ils nuisent à l'accessibilité, compliquent la maintenance et limitent la responsivité. Les outils CSS modernes comme Flexbox et Grid offrent des solutions supérieures sur tous les plans.

Si vous maintenez un site utilisant des tableaux de mise en page, planifiez leur migration progressivement. Pour les cas où vous ne pouvez pas les éliminer (emails notamment), utilisez systématiquement role="presentation" pour minimiser l'impact sur l'accessibilité.