Tableau responsif

Un tableau responsive est un tableau HTML dont la présentation s’adapte automatiquement aux contraintes d’affichage des différents terminaux (ordinateur, tablette, smartphone), tout en préservant la lisibilité, l’intégrité sémantique et l’accessibilité des données qu’il contient.

Contrairement à un tableau classique — qui peut déborder de l’écran ou devenir illisible sur mobile —, un tableau responsive utilise des techniques CSS et/ou JavaScript pour :

• Réorganiser les colonnes (ex. : empilement vertical),
• Masquer temporairement les colonnes secondaires (avec possibilité de les révéler),
• Transformer le tableau en liste de cartes ou en format « clé-valeur » sur petits écrans,
• Ajouter une zone de défilement horizontale contrôlée (dernier recours).

L’objectif n’est pas de casser la structure HTML sémantique (<table>, <thead>, <tbody>, <th>, <td>), essentielle pour l’accessibilité (lecteurs d’écran) et le référencement, mais de modifier uniquement sa représentation visuelle selon le contexte d’usage.

Techniques courantes (sans compromettre la sémantique) :

• CSS Media Queries + display: block sur les cellules en mobile,
• Classe .responsive-table avec conteneur en overflow-x: auto,
• Transformation en « cartes » via @media (chaque ligne devient un bloc avec labels visibles),
• Utilisation de l’attribut data-label pour afficher l’en-tête de colonne dans chaque cellule mobile,
• Frameworks comme Bootstrap (table-responsive) ou DataTables (pour les tableaux complexes).