Utilia
Catégories ▾
Langue: fr ▾

Générateur de tableau HTML

Créez le code d’un tableau HTML depuis une grille ou un CSV collé, avec légende, en-têtes th scope, classe CSS ou styles en ligne, et aperçu en direct.

Entrée passe à la ligne suivante. Collez dans une cellule des cellules copiées d’un tableur pour remplir la grille à partir de là.

Mise en forme

Aperçu

Importer du CSV ou des données de tableur

Comment générer un tableau HTML

  1. Remplissez la grille. Utilisez Ajouter une ligne, Ajouter une colonne, Supprimer la dernière ligne et Supprimer la dernière colonne, ou les boutons × placés à côté de chaque ligne et colonne. Nouveau tableau vide repart d’une grille vierge de 3 × 3.
  2. Pour reprendre des données existantes, collez du CSV ou des cellules copiées d’Excel, de LibreOffice ou de Google Sheets dans Importer du CSV ou des données de tableur, vérifiez le Séparateur, puis cliquez sur Importer. Vous pouvez aussi coller un bloc de cellules directement dans une case de la grille.
  3. Ajoutez une Légende et indiquez si La première ligne contient les en-têtes et si La première colonne contient des en-têtes.
  4. Sous Mise en forme, choisissez Aucun style, Classe CSS ou Styles en ligne, puis réglez au besoin la Couleur des bordures, le Fond des en-têtes et les Lignes alternées.
  5. Vérifiez l’Aperçu, puis cliquez sur Copier le HTML ou téléchargez le code dans un fichier .html.

Un balisage de tableau accessible

Un tableau n’est accessible que si un lecteur d’écran sait quelles cellules sont des en-têtes et ce qu’elles décrivent. Cet outil produit la structure recommandée par la norme HTML et les techniques WCAG :

  • <caption> donne un nom au tableau. Les lecteurs d’écran l’annoncent à l’entrée du tableau, et elle aide tous les lecteurs à comprendre ce qu’ils regardent. Soyez bref et descriptif.
  • <thead> et <tbody> séparent la ligne d’en-têtes des lignes de données. À l’impression, le navigateur peut répéter le <thead> sur chaque page.
  • <th scope="col"> marque chaque en-tête de colonne et, avec La première colonne contient des en-têtes, <th scope="row"> marque la première cellule de chaque ligne. Sur une cellule de données, le lecteur d’écran peut alors lire les en-têtes correspondants, par exemple « Pro, Prix, 12 $ ».

Réservez les tableaux aux données tabulaires, jamais à la mise en page. Évitez autant que possible les cellules fusionnées : une grille simple, avec une ligne d’en-têtes et au besoin une colonne d’en-têtes, reste la plus facile à parcourir avec une aide technique.

Options de mise en forme

  • Aucun style produit un balisage nu, qui reprend les styles de tableau de votre site. C’est le meilleur choix dans un CMS ou avec un système de design.
  • Classe CSS ajoute class="…" à la balise <table> et affiche le bloc CSS correspondant, à coller dans votre feuille de style. Le Nom de la classe est nettoyé (lettres, chiffres, tirets et soulignés) pour donner toujours un sélecteur valide.
  • Styles en ligne place un attribut style sur chaque élément. C’est verbeux, mais indispensable pour les courriels HTML : beaucoup de logiciels de messagerie ignorent les blocs <style>. Avec une classe, le téléchargement ajoute le CSS dans un élément <style>.

Seules de vraies couleurs hexadécimales, issues des sélecteurs de couleur, sont écrites dans le CSS : rien d’inattendu ne peut se glisser dans vos styles.

Échappement et sécurité

Chaque cellule est échappée : <, > et & deviennent &lt;, &gt; et &amp;. Un texte comme <b> ou a < b s’affiche donc tel quel au lieu d’être interprété comme du code. Les retours à la ligne des cellules importées deviennent <br>. L’aperçu est construit uniquement à partir de ce code échappé et passe par un filtre qui ne garde que les éléments de tableau : un script collé ne peut jamais s’exécuter.

Questions fréquentes

Puis-je mettre un lien ou du gras dans une cellule ?

Pas depuis la grille : le contenu des cellules est toujours échappé, ce qui garantit un code valide et sûr. Ajoutez liens et mise en forme dans le code généré si vous en avez besoin.

Pourquoi une légende plutôt qu’un titre au-dessus du tableau ?

La balise <caption> est rattachée au tableau dans l’arbre d’accessibilité : les lecteurs d’écran l’annoncent avec lui. Un titre placé au-dessus n’a pas ce lien.

L’outil gère-t-il les cellules fusionnées (colspan et rowspan) ?

Non. La grille produit une cellule par position. Les cellules fusionnées compliquent la lecture avec une aide technique : réservez-les aux cas où elles sont vraiment utiles et ajoutez-les à la main.

Mes données sont-elles envoyées sur un serveur ?

Non. La grille, l’import, le code et l’aperçu sont produits dans votre navigateur. Rien de ce que vous collez n’est transmis.

Quelle taille de tableau puis-je créer ?

La grille accepte jusqu’à 500 lignes et 30 colonnes. Pour des volumes plus importants, un tableau de données triable ou un fichier CSV téléchargeable est généralement plus utile qu’un tableau HTML statique.

Outils similaires