TableCleaner - Script de nettoyage et restructuration des tableaux HTML

Démo disponible sur ma page Github dédiée, pour ceux qui sont pressé et qui ne vont pas lire la suite !

Contexte

Dans le CMS utilisé par l’administration luxembourgeoise, les tableaux devraient idéalement être créés via le composant dédié.

En pratique, de nombreux utilisateurs font un copier/coller direct depuis Excel ou Word dans l’éditeur.

Cette méthode est rapide, mais elle entraîne plusieurs problèmes :

  • ajout automatique de nombreux styles inline, classes inutiles et attributs obsolètes
  • structure HTML souvent très chargée ou non conforme
  • en-têtes de lignes et de colonnes incorrectement définis
  • cellules non reliées aux en-têtes auxquels elles font référence
  • absence fréquente de titre de tableau

Les impacts

Qualité du code

Le HTML généré depuis Word ou Excel est souvent complexe et contient beaucoup d’éléments inutiles :

  • balises surchargées
  • styles hérités du document source
  • attributs non nécessaires dans le CMS

Conséquences :

  • code plus difficile à maintenir
  • augmentation du risque de régression graphique
  • rendu parfois incohérent avec la charte graphique
  • structure qui ne respecte pas le design system

Accessibilité numérique

Au-delà de la qualité du code, l’impact est important sur l’accessibilité.

Quand un tableau :

  • n’a pas de titre
  • ne définit pas clairement ses en-têtes
  • ne relie pas correctement les cellules à ces en-têtes

…la compréhension devient difficile pour les personnes utilisant des technologies d’assistance comme :

  • les lecteurs d’écran
  • les outils de navigation clavier
  • certains dispositifs d’assistance spécialisés

Cela constitue une non-conformité au RAWeb, avec un impact direct sur l’accessibilité des contenus publiés.

La solution mise en place

En attendant qu’un nettoyage natif soit intégré directement dans le CMS, une solution intermédiaire a été mise à disposition :

Un script de nettoyage et de restructuration des tableaux HTML

Objectifs :

  • supprimer les attributs, classes et styles inutiles
  • simplifier le code HTML généré
  • restructurer correctement le tableau
  • définir les en-têtes de manière conforme
  • améliorer l’accessibilité et la compatibilité RAWeb
  • réduire les risques de régression visuelle

Une Démo disponible sur ma page Github dédiée

Fonctionnement

L’utilisation a été pensée pour rester très simple.

Étape 1

Coller directement dans une zone de saisie (textarea) le tableau provenant de Word ou d’Excel.

Étape 2 et 3

Indiquer :

  • le titre du tableau
  • où se trouvent les en-têtes de lignes et de colonnes

Étape 4

Cliquer sur le bouton "Nettoyer le tableau" pour générer le résultat

Le script :

  • nettoie le HTML
  • restructure le tableau
  • applique les bonnes relations entre cellules et en-têtes
  • génère une version plus propre et accessible

Options avancées

Pour les besoins plus spécifiques, plusieurs options complémentaires peuvent être configurées :

par exemple :

  • adaptation selon la structure du tableau source
  • gestion de cas particuliers
  • flexibilité dans la génération du HTML final

Cela permet de répondre à la majorité des tableaux rencontrés tout en gardant une interface simple pour les usages courants.

Étape 5

Récupération du résultat

Une fois généré, le tableau peut être récupéré sous deux formats :

  • Texte : pratique pour copier rapidement dans certains champs

  • HTML : pour l’intégrer directement dans le CMS ou dans d’autres outils

Bénéfices

Pour les contributeurs

  • gain de temps
  • pas besoin de reconstruire le tableau manuellement
  • workflow simple et rapide

Pour les équipes techniques

  • HTML plus propre
  • meilleure maintenabilité
  • moins de risques de régression

Pour l’accessibilité

  • meilleure lecture avec les technologies d’assistance
  • conformité renforcée avec le RAWeb

Pour la qualité globale du portail

  • contenu plus fiable
  • rendu plus cohérent
  • meilleure expérience utilisateur

Conclusion

Le copier/coller depuis Excel ou Word restera un usage fréquent.

L’objectif n’est donc pas de bloquer cette pratique, mais de sécuriser et fiabiliser le résultat.

Ce script apporte une réponse immédiate :

  • plus simple pour les contributeurs
  • plus propre techniquement
  • plus accessible pour les utilisateurs

…en attendant une intégration native de ce traitement directement dans le CMS.

Collaborer

N'hésitez pas à me remonter les problèmes, faux-positifs ou vos suggessions d'améliorations directement sur GitHub