Générateur de tableaux HTML

Par Bogdan Sandu (EN) · Publié 9 juin 2025 · Dernière mise à jour 13 septembre 2026

Le générateur de tableaux HTML est un outil accessible dans le navigateur qui permet de créer des tableaux HTML prêts pour la production sans écrire une seule ligne de code.

Configurez tout visuellement. Copiez la sortie. Déposez-le n'importe où.

Ce que vous pouvez faire

• Définir le style, la largeur, la couleur et le rayon de la bordure
• Choisissez le espacement intérieur de l'en-tête et du corps indépendamment
• Choisir une famille de polices et un alignement de cellule
• Ajoutez des lignes rayées, des surbrillances et un wrapper réactif
• Basculer les styles en ligne ou un bloc <style> autonome
• Ajouter des attributs id, class, ou <caption> au tableau

La saisie des données est rapide. Parcourez les cellules comme dans une feuille de calcul. Les touches fléchées se déplacent entre eux. Collez ou téléchargez un CSV et le tableau se remplit instantanément.

Contrôle structurel complet :

• Plusieurs lignes d'en-tête (jusqu'à 5) et une ligne de pied de page optionnelle
• Fusionner des cellules entre des lignes et des colonnes avec une sélection par glisser-déposer
• Faites glisser les poignées pour réorganiser les lignes
• Poignées de redimensionnement de colonne dans l'éditeur
• Annuler/refaire avec Ctrl+Z / Ctrl+Y

Trois formats de sortie sont disponibles dans le panneau de sortie : code HTML, syntaxe de tableau Markdown et aperçu en direct. L'aperçu ne s'affiche que lorsque vous passez à cet onglet. Téléchargez le résultat sous forme de fichier .html ou copiez-le dans le presse-papiers en un clic.

Générateur de table HTML : Qu'est-ce que c'est

Un générateur de table HTML est un outil basé sur un navigateur qui convertit les entrées de style feuille de calcul en balisage de table fini.

Vous tapez ou collez des données dans une grille, ajustez quelques paramètres et l'outil écrit le code sous-jacent pour vous.

La plupart des outils associent cette grille à un panneau d'aperçu en direct à côté, similaire à un éditeur WYSIWYG léger.

La sortie est un simple balisage HTML (EN), le même code que chaque navigateur comprend déjà.

Il diffère d'une feuille de calcul ou d'un constructeur de page parce qu'il n'a qu'une seule tâche : produire du balisage statique, pas gérer des données ou concevoir une page complète.

Ce qu'il n'est pas :

• Une application de tableur pour stocker ou calculer des données
• Un bloc de table de système de gestion de contenu
• Une bibliothèque JavaScript pour le tri, le filtrage ou les mises à jour en direct

Des outils comme Tables Generator (EN), DivTable.com (EN), et le W3Schools table generator (EN) suivent tous cette même définition étroite. Ils produisent un balisage statique plutôt qu'une application de données fonctionnelle.

Structure de table et balises produites par un générateur

Un générateur génère à chaque fois la même poignée de balises : table, thead, tbody, tfoot, tr, th et td.

Ces balises ne sont pas interchangeables. Chacun indique au navigateur, et à toute technologie d'assistance lisant la page, quel rôle joue une section du tableau.

Le modèle de table lui-même remonte aux spécifications HTML originales du W3C, bien avant que HTML5 n'ajoute le regroupement sémantique pour les en-têtes, les corps et les pieds de page.

La balise utilisée aujourd'hui est définie par le WHATWG HTML Living Standard (EN), la spécification que les navigateurs modernes mettent en œuvre. Les détails de référence quotidiens sont documentés sur MDN Web Docs (EN).

Un tableau complet et accessible utilise chacune de ces balises :

<table>
  <caption>Q3 sales by region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Units</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>1,240</td>
      <td>$48,600</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>1,240</td>
      <td>$48,600</td>
    </tr>
  </tfoot>
</table>

La plupart des générateurs enveloppent automatiquement les cellules d'en-tête dans th et les cellules de données dans td, ce qui permet de conserver le balisage lisible sans marquage manuel.

Les cellules fusionnées ont besoin d'attributs supplémentaires que l'interface de la grille expose généralement comme une option de clic droit ou un bouton de fusion. Dans ce générateur, cliquez et faites glisser sur les cellules et appuyez sur Merge Cells.

• colspan fusionne les cellules à travers les colonnes
• rowspan fusionne les cellules vers le bas des lignes
• Une légende de tableau ajoute une description intitulée au-dessus de la grille

<tr>
  <th colspan="2">Spans two columns</th>
</tr>
<tr>
  <td rowspan="2">Spans two rows</td>
  <td>A</td>
</tr>
<tr>
  <td>B</td>
</tr>

Une table nue construite avec seulement tr et td, en sautant thead et tbody, s'affiche toujours correctement dans un navigateur. Cela donne aux lecteurs d'écran et aux sélecteurs CSS moins de travail.

Comment les données sont converties en balises de table

Les données entrent dans un générateur de tableaux via l'un des trois chemins suivants : saisie manuelle de la grille, données de feuille de calcul collées ou téléchargement CSV.

Entrée manuelle : vous cliquez sur chaque cellule et tapez une valeur, ce qui fonctionne bien pour les petites tables de moins de 20 lignes.

Données collées : copier une plage d'une feuille de calcul et la coller dans la grille divise automatiquement le texte en lignes et colonnes.

Téléchargement CSV : un fichier séparé par des virgules est analysé directement, en ignorant complètement l'étape de copier-coller.

Le format CSV lui-même est ancien et n'est que vaguement normalisé. RFC 4180 (EN), publié par l'IETF en octobre 2005, est ce qui se rapproche le plus d'une définition officielle du format et de son type MIME text/csv.

Les cellules et formules fusionnées survivent rarement au voyage. Un générateur lit la valeur calculée affichée dans une cellule, et non la formule derrière elle. Toute plage fusionnée est aplatie en cellules séparées à moins que la fusion ne soit refaite manuellement par la suite.

Aller dans l'autre sens est tout aussi courant. Les équipes qui ont besoin de récupérer les données brutes, au lieu du balisage, utilisent généralement un convertisseur HTML table to CSV converter (EN) dédié plutôt que de tout retaper.

Un transfert similaire se produit lorsque la destination est une API ou un script attendant des données structurées. Un convertisseur CSV en JSON (EN) gère cette étape sans toucher au balisage du tableau.

Les limites de lignes et de colonnes varient selon les outils. La plupart des générateurs gratuits se limitent à quelque chose entre 50 et 100 lignes avant que la grille du navigateur ne commence à ralentir.

Comment le style est appliqué aux tables générées

Chaque générateur est livré avec un petit ensemble de contrôles de style.

• Style de bordure : lignes de grille pleines, réduites ou supprimées
• Espacement intérieur cellulaire : espace de respiration à l'intérieur de chaque cellule
• Zèbre rayé : alternant la couleur de fond de la rangée

La plupart des options de style de bordure correspondent à une propriété CSS, border-collapse, qui fusionne les bordures de cellules doubles en une seule ligne au lieu d'une grille double.

L'ancien balisage supportait également un attribut cellspacing. Les générateurs modernes sautent cela entièrement et gèrent l'espacement via CSS à la place.

Style en ligne : l'outil écrit les attributs de style directement sur le tableau et ses cellules, de sorte que le tableau s'affiche correctement dès qu'il est collé n'importe où.

Feuille de style liée : l'outil affiche les noms des classes et un bloc séparé de CSS (EN), ce qui est plus propre pour un site web complet, mais ne fait rien de lui-même si la feuille de style n'est pas également incluse.

La sortie du générateur a tendance à être simple par conception. Quiconque veut un look plus audacieux, des effets de survol ou des coins arrondis commence généralement par une galerie de tables CSS (EN) et adapte la structure du générateur à ce style.

Les classes Framework sont un chemin entièrement distinct. Une table destinée à un projet CSS Bootstrap ou Tailwind voit généralement sa bordure et son espacement supprimés, car les propres classes de table du framework prennent en charge ce travail.

Comportement des tables réactives

Les appareils mobiles ont représenté 62,73% du trafic mondial des sites Web au deuxième trimestre de 2025, selon les données StatCounter (EN) rapportées par Statista.

Un tableau qui ne fonctionne qu'en pleine largeur de bureau échoue pour la plupart des personnes qui vont réellement charger la page.

Horizontal scroll wrapper : le correctif par défaut de la plupart des générateurs s'applique. Le tableau conserve sa pleine largeur tandis qu'un conteneur défilant permet aux visiteurs de glisser latéralement pour voir les colonnes restantes.

Cette approche fonctionne, mais elle cache les colonnes hors de l'écran sans beaucoup d'indice visuel. Les visiteurs manquent parfois des données juste au-delà du bord.

Une approche plus délibérée repose sur des techniques de design réactif (EN) plutôt que sur une boîte de défilement.

Ces techniques utilisent généralement des requêtes média (EN) pour réorganiser les colonnes en lignes empilées et étiquetées sous une largeur d'écran définie.

Peu de générateurs de tables gratuits intègrent automatiquement cette logique de redistribution. La plupart le laissent sous forme de CSS ajouté par la suite, ce qui est l'une des raisons pour lesquelles la sortie du générateur nécessite souvent le laissez-passer d'un développeur avant d'être expédiée. Celui-ci emprunte la voie du scroll-wrapper : cochez Responsive wrapper et la table est enveloppée dans un conteneur de débordement, et la redistribution des lignes empilées reste un travail CSS pour vous.

Accessibilité des tables générées

Le balisage généré peut paraître correct à l’écran et être illisible pour un lecteur d’écran s’il ignore une poignée d’attributs d’accessibilité.

Chiffres clés :

• Selon le rapport WebAIM Million (EN) 2026, seulement 19 % des tables d’un million de pages d’accueil avaient un balisage de table de données valide.
• 91,3 % des utilisateurs de lecteurs d'écran utilisent également un lecteur d'écran sur un appareil mobile, selon WebAIM Screen Reader User Survey #10 (EN)
• Les tableaux de données complexes restent parmi les dix problèmes les plus fréquemment signalés par les utilisateurs de lecteurs d’écran dans cette même enquête de 2024

L'écart entre visuellement correct et correct pour le lecteur d'écran se résume à une courte liste d'attributs que la plupart des générateurs n'ajoutent pas par défaut.

Attribut Scope : indique à un lecteur d'écran si une cellule d'en-tête s'applique à sa ligne ou à sa colonne, ce qui est important lorsqu'un tableau comporte des en-têtes sur plusieurs côtés.

Regroupement sémantique : l'utilisation de thead et tbody au lieu de div rows styled permet aux technologies d'assistance d'annoncer le nombre de lignes et de colonnes et de sauter directement entre les cellules.

Les les directives d'accessibilité du Web (EN) en vertu des WCAG prévoient que ces deux éléments soient en place pour tout tableau présentant des données réelles plutôt qu'une mise en page. Le tutoriel sur les tables WAI du W3C (EN) présente chaque cas.

Les générateurs conçus pour la vitesse ajoutent rarement une légende, des attributs de portée ou un résumé de ce que contient le tableau. Ces étapes nécessitent de connaître la signification des données, et pas seulement leur forme.

Pour être précis sur l'outil sur cette page : il écrit les cellules thead, tbody, tfoot et th pour chaque ligne d'en-tête, et ajoute un <caption> lorsque vous cochez cette option. Il n'ajoute pas d'attributs scope. Pour un tableau avec des en-têtes de ligne, ajoutez manuellement scope="row" aux cellules de la première colonne après avoir copié le code.

Vérifier le résultat par rapport à un guide sur les tables accessibles (EN) avant de publier permet de saisir la plupart de ce qu'un générateur laisse de côté.

Quel générateur de table HTML utiliser

Le bon outil dépend de l'origine des données du tableau et de l'emplacement où le balisage fini doit être envoyé.

Tables Generator (tablesgenerator.com) se distingue par son exportation LaTeX et Markdown, ce qui en fait un choix courant pour les articles universitaires ou la documentation GitHub plutôt que pour les pages Web.

Ce chemin Markdown est important parce que GitHub rend les tables Markdown nativement dans les fichiers README, sans aucun HTML requis.

DivTable.com penche vers des mises en page basées sur CSS, ce qui est utile lorsqu'un tableau a besoin d'un style visuel personnalisé au-delà des contrôles de bordure et de remplissage par défaut d'un générateur.

W3Schools table generator garde les choses claires. Sa valeur est d'enseigner la syntaxe sous-jacente plutôt que de produire un produit final poli.

Où se trouve ce générateur : grille, colle et entrée de fichier CSV comme Tables Generator, sortie HTML et Markdown, plus des cellules fusionnées, une ligne de pied de page, une légende et un enveloppeur réactif. Il ne fait pas LaTeX.

Aucun de ces outils, celui-ci compris, ne vérifie l'accessibilité de sa propre sortie. L'exécution du résultat à travers un vérificateur par la suite reste une étape distincte, nécessaire indépendamment de laquelle on est choisi.

La propreté de sortie varie aussi. Si l'exportation d'un générateur laisse des retraits incohérents ou des espaces blancs supplémentaires, l'exécuter à travers un HTML beautifier (EN) corrige le formatage avant qu'il ne se rapproche d'une page active.

Choisir un format d'exportation

Le bon format d'exportation dépend de l'endroit où la table doit être placée, et non du format qui vous est le plus familier.

HTML est le choix par défaut pour tout ce qui va directement sur une page web, puisqu'il n'a pas besoin d'étape de conversion supplémentaire.

Les tables Markdown sont formellement définies comme une extension de la spécification CommonMark, énoncée dans la GitHub Flavored Markdown Spec (EN), version 0.29, datée d’avril 2019.

Cette extension est ce qui permet à un tableau d'être rendu comme une grille au lieu de caractères bruts dans les générateurs de sites statiques et les plateformes wiki construites autour de Markdown.

Lorsque la route Markdown est choisie mais que la destination finale a encore besoin de balisage brut, l'exécution du fichier via un convertisseur Markdown en HTML comble cet écart.

L'exportation LaTeX existe principalement pour l'écriture académique. Les tableaux générés de cette façon finissent généralement par être collés directement dans un éditeur comme Overleaf (EN) plutôt que dans un navigateur.

Les fichiers CSV et JSON ignorent entièrement le formatage et ne contiennent que les données. C'est pourquoi un générateur construit autour de l'un des autres formats manque parfois d'une option CSV ou JSON propre.

Les systèmes hérités qui attendent encore l'ancien format XML ne sont pas non plus laissés de côté. Un convertisseur CSV en XML (EN) comble cet écart sans toucher au tableau d'origine.

Utilisation de tables générées dans les e-mails

Apple Mail et Gmail représentent ensemble près de 90% de tous les e-mails ouverts, selon les données de Litmus Email Analytics (EN) à partir de 2026.

Les deux clients rendent le CSS différemment d'un navigateur, et les mises en page basées sur des tableaux survivent encore mieux à cette incohérence que les méthodes de mise en page CSS modernes.

Avantages :

• Le balisage des tableaux s'affiche de manière cohérente dans la plupart des clients de messagerie, y compris les anciennes versions d'Outlook
• Les styles en ligne générés automatiquement survivent aux analyseurs CSS de courrier électronique dépouillés
• Aucune dépendance sur les feuilles de style externes que certains clients bloquent par défaut

Cons :

• Le défilement horizontal fonctionne à peine dans la fenêtre de rendu d'un client de messagerie
• Les requêtes multimédias sont prises en charge de manière inégale, de sorte que le reflow compatible avec les mobiles ne peut pas être fiable
• Le support des lecteurs d'écran dans les clients de messagerie est bien en retard par rapport au support des navigateurs

L'approche la plus sûre consiste à traiter chaque table exportée comme une table à largeur fixe et à la tester dans un client de messagerie de bureau et un client de messagerie mobile avant de l'envoyer.

La structure de secours est également importante. Un tableau avec des bordures claires en ligne et le remplissage se dégrade gracieusement, même dans le rare client qui supprime entièrement les blocs CSS.

Quand un générateur de table HTML ne s'applique pas

Un générateur de table produit un balisage statique. Rien de plus.

Au moment où une table doit trier, filtrer, rechercher ou mettre à jour à partir d’une source de données en direct, un générateur n’est pas le bon point de départ.

• Grilles de données triables ou filtrables, qui nécessitent un comportement JavaScript qu'un générateur statique ne produit pas
• Tableaux de bord extrayant des chiffres d'une API ou d'une base de données en temps réel
• Tableaux avec des milliers de lignes, où les performances du navigateur souffrent indépendamment de la qualité du balisage
• Concevez des systèmes qui définissent déjà un composant de table à l'aide de code réutilisable plutôt que de HTML brut

Les équipes qui ont besoin de trier, filtrer et rechercher des comportements passent généralement à une bibliothèque comme DataTables.js (EN) ou un outil dédié comme Airtable (EN) au lieu de générer des sorties statiques.

Un générateur peut toujours produire le balisage de départ pour une petite table de référence principalement statique à l'intérieur d'une application plus grande. Il cesse d'être le bon outil une fois que cette table doit se comporter comme un composant d'application plutôt que comme un élément de page.

Créer une table avec un générateur, étape par étape

Le processus est assez court pour se terminer en moins de cinq minutes pour une petite table. Dans le générateur ci-dessus, les panneaux s'exécutent de haut en bas dans le même ordre.

1. Tapez dans la grille, ou ouvrez Import from CSV et collez ou téléchargez un fichier. Laissez la case « Première ligne est l'en-tête » cochée si vos données en ont une.
2. Vérifiez que les en-têtes se trouvent dans la première ligne, puis définissez Header Rows et cochez Footer row si vous avez besoin d'une ligne de totaux.
3. Définissez le style de bordure, le remplissage, la police et les rayures dans les Paramètres du tableau. Cochez Ajouter une légende et saisissez-en une.
4. Basculez le panneau de sortie sur Aperçu et faites glisser les poignées de colonne si quelque chose semble à l'étroit.
5. Revenez à Code HTML (ou Markdown) et cliquez sur Copier le code, ou Télécharger le .html.
6. Collez le code dans la page ou le fichier de destination et vérifiez le rendu.

Exécuter le résultat collé à travers un CSS beautifier (EN) vaut la minute supplémentaire chaque fois que le générateur sort un bloc de feuille de style séparé au lieu de styles en ligne.

Tester à ce stade est plus important que de bien choisir chaque style la première fois. De petits ajustements après le collage sont plus rapides que d'essayer de perfectionner la table à l'intérieur du générateur lui-même.

Erreurs courantes lors de la génération ou du collage de code de table

Coller directement à partir de Word : L'exportation de Word contient des balises propriétaires avec les données du tableau.

Les commentaires conditionnels et les styles préfixés mso- accompagnent le contenu, gonflant le fichier et confondant certains éditeurs CMS.

Faire passer le code source par un convertisseur Word en HTML débarrasse d'abord ce bagage avant que la table n'atteigne le générateur ou la page.

Sauter l'en-tête après des modifications manuelles : Modifier le code généré à la main fait parfois tomber l'enveloppe de l'en-tête par accident, brisant discrètement l'association d'en-tête pour les lecteurs d'écran.

Publiation de sortie non minifiée : les exportations du générateur contiennent souvent des espaces blancs supplémentaires et des retraits destinés à la lisibilité, pas à la production.

Passer le fichier final à travers un minifier HTML (EN) avant de le publier réduit ce poids sans toucher le tableau visible.

Aucune de ces erreurs n'est visible en un coup d'oeil sur la table rendue. Ils apparaissent plus tard, dans le poids de la page, les audits d’accessibilité, ou une importation CMS qui se comporte étrangement.

Intégrer une table générée dans une plateforme de site Web

WordPress alimente 42,4% de tous les sites Web, selon les données de W3Techs (EN) à partir de 2026. Cela en fait la destination unique la plus courante pour un tableau collé.

WordPress : collez le balisage exporté dans un bloc HTML personnalisé, pas dans le bloc de paragraphe régulier, ou les balises seront échappées au lieu d'être rendues.

Une explication complète sur l’ajout de tables dans WordPress (EN) couvre cette route de bloc HTML personnalisé plus en profondeur.

Squarespace : son bloc de code accepte directement le HTML brut et le restitue sans nettoyage supplémentaire, de sorte qu'un tableau collé s'affiche exactement tel qu'exporté.

Wix : l'option d'intégration encapsule le code HTML collé dans un conteneur de type iframe, qui peut découper un tableau large à moins que la largeur du conteneur ne soit ajustée manuellement.

Notion fonctionne différemment encore une fois. Coller du HTML brut dans une page Notion se termine généralement en texte brut. Commencez plutôt par l'onglet Markdown, que Notion gère bien mieux que le HTML brut, et reconstruisez dans son propre bloc de table si quelque chose passe comme texte.

Vérifier comment une plateforme rend réellement le code collé, avant de valider un format, évite un deuxième tour de travail de formatage plus tard.

Questions fréquentes : Générateur de tableaux HTML

Quelle est la différence entre un générateur de table et le codage manuel d'une table ?

Un générateur écrit les styles thead, tbody, tr, td et border-collapse automatiquement à partir des données collées ou saisies.

Le codage manuel signifie taper chaque balise manuellement. La sortie peut être identique, mais un générateur permet de gagner du temps sur la structure répétitive et réduit les erreurs de syntaxe dans les tables plus grandes.

Un générateur de table est-il meilleur qu'un composant de table CSS Bootstrap ou Tailwind ?

Ils résolvent différents problèmes. Un générateur produit un balisage et un style autonomes pour une table.

Bootstrap et Tailwind CSS proposent des classes de tables réutilisables destinées au système de conception d'un site entier, qui s'adaptent mieux une fois qu'une table a besoin du même aspect.

Comment importez-vous des données d'Excel ou de Google Sheets dans un générateur ?

Sélectionnez la plage dans Excel ou Google Sheets, copiez-la, puis collez-la directement dans la grille du générateur.

La plupart des outils divisent automatiquement le texte en lignes et colonnes à l'aide de tabulations et de sauts de ligne, bien que les cellules et les formules fusionnées ne soient pas conservées.

Un tableau peut-il être modifié après avoir été généré ?

Oui, la plupart des générateurs vous permettent de cliquer dans la grille et d'ajuster les valeurs, d'ajouter des lignes ou de modifier le style avant de réexporter.

Une fois que le code est collé ailleurs, les modifications ultérieures se produisent généralement directement dans le code HTML plutôt que dans l'outil.

Les générateurs de tableaux prennent-ils en charge colspan et rowspan pour les cellules fusionnées ?

La plupart le font, via une option de fusion dans l'interface de la grille qui ajoute l'attribut colspan ou rowspan automatiquement. Celui-ci prend en charge les deux : faites glisser sur les cellules et cliquez sur Fusionner les cellules.

L'assistance varie selon l'outil. Certains générateurs gratuits gèrent les fusions de colonnes mais ignorent les fusions de lignes, alors vérifiez avant de vous fier à des mises en page complexes.

Qu'arrive-t-il après l'utilisation d'un générateur de table HTML ?

Après avoir utilisé un générateur de table HTML, l'étape suivante consiste à valider le balisage exporté plutôt que de supposer qu'il fonctionne partout. Le travail de l'outil s'arrête à produire des balises.

Trois vérifications comptent plus que les autres, dans cet ordre.

• Exécuter le balisage via un vérificateur d'accessibilité
• Aperçu du tableau dans une fenêtre de largeur de téléphone
• Minimisez le fichier avant sa mise en ligne

Combinez les deux résultats de WebAIM, seulement 19% des tables contiennent un balisage valide et 91,3% des utilisateurs de lecteurs d'écran naviguent également sur mobile, et le même public est touché par les deux échecs en même temps.

Sauter l’étape de validation permet de gagner du temps maintenant, mais transfère ce coût à toute personne qui dépendra de la technologie d’assistance plus tard.

Les équipes qui créent une page avec à la fois des données structurées et des entrées utilisateur utilisent généralement un Générateur de formulaire HTML. Les formulaires et les tableaux couvrent ensemble la plus grande partie de la surface interactive d'une page.