Tapez dans la grille ci-dessus et le HTML se met à jour en dessous, en direct. Ce générateur fonctionne comme les tableaux se construisent réellement : vous voyez le tableau pendant que vous l’éditez, et le balisage que vous copiez est exactement ce que l’aperçu montre — sérialisé depuis un véritable élément DOM, pas assemblé à coups de chaînes.
Construire le tableau
Cliquez sur une cellule et tapez. Les compteurs Lignes et Colonnes redimensionnent la grille (jusqu’à 20 × 12) ; les cellules gardent leur contenu quand vous agrandissez et réduisez, donc retravailler la mise en page ne veut pas dire retaper. Activez une Ligne d’en-tête pour marquer la première ligne en cellules <th>, et une Colonne d’en-tête pour faire de même sur la première colonne — la grille affiche les en-têtes en teinte pendant l’édition, la structure reste donc toujours visible.
Fusion → et Fusion ↓ combinent la cellule sélectionnée avec sa voisine (produisant de vrais attributs colspan et rowspan) ; Scinder restitue une cellule fusionnée en cellules individuelles. Les boutons de fusion s’activent dès qu’une cellule est sélectionnée dans la grille — cliquez une cellule, fusionnez, continuez à taper.
Une Légende ajoute l’élément <caption> accessible, que les lecteurs d’écran annoncent avant le contenu du tableau et qui reste attachée au tableau où que vous le colliez.
Une sortie propre et sémantique
L’option Sortie sémantique (activée par défaut) enveloppe la ligne d’en-tête dans un vrai <thead> avec scope="col" sur les cellules d’en-tête et scope="row" sur les cellules de la colonne d’en-tête — les attributs que les technologies d’assistance utilisent pour lire correctement les tableaux. Les options de style couvrent les variations pratiques : bordures (toutes, extérieures, aucune), lignes alternées et la marge des cellules (compacte, normale, large). L’aperçu reflète chaque choix, et le balisage généré reste minimal — pas de classes que vous n’avez pas demandées, pas de styles en ligne, pas de bruit de framework.
Copier le HTML met le balisage courant dans votre presse-papiers, prêt à coller dans votre page ou votre gabarit d’e-mail. Télécharger .html emballe la même table dans un document autonome mis en page.
Importer ce que vous avez déjà
Importer un fichier accepte le CSV (séparateurs virgule ou tabulation, champs entre guillemets gérés) et les tableaux HTML existants, avec détection automatique entre les deux. Importer un tableau HTML préserve sa structure — en-têtes, légendes et fusions colspan/rowspan — dans la grille, pour la retravailler et exporter une version plus propre. Importer un CSV transforme chaque ligne en ligne de tableau, prête pour les en-têtes et le style. Dans les deux cas, le tableau devient éditable dès qu’il atterrit.
Tout reste sur votre appareil
Le générateur tourne entièrement dans votre navigateur : la grille, la source et l’aperçu forment une seule page, sans rien envoyé où que ce soit. Votre tableau est enregistré dans le stockage local pendant que vous travaillez — un onglet fermé n’est pas un tableau perdu — et Réinitialiser efface vers l’exemple de départ quand vous voulez repartir de zéro.
Questions fréquentes
Le balisage fonctionne-t-il dans les e-mails ? Le fragment généré utilise les éléments de tableau HTML standards et un balisage sémantique pour les en-têtes. L’option Télécharger .html ajoute aussi une petite feuille de style pour conserver les choix de bordures et d’espacement dans le document autonome, sans ajouter d’attributs de présentation au fragment copié.
Peut-on coller ça dans du Markdown ? Les tableaux Markdown n’ont ni fusion ni légende. Pour Markdown, gardez le tableau simple — ou utilisez l’éditeur Markdown de ce site, dont la syntaxe des cas simples correspond à ce générateur.
Pourquoi sérialiser depuis un élément DOM ? Construire le balisage par concaténation de chaînes, c’est ainsi que les guillemets parasites et le texte non échappé se glissent dans la sortie. Sérialiser un véritable élément garantit un balisage bien formé par l’analyseur du navigateur lui-même.
Peut-on générer des tableaux stylés ? Le téléchargement inclut une petite feuille de style correspondant à vos choix de bordures, rayures et marges ; le fragment copié reste minimal en classes pour se fondre proprement dans votre CSS existant.