Générateur de Tableaux HTML

Un tableau HTML est une grille de données écrite avec l’élément table. Les lignes sont des éléments tr, les cellules d’en-tête des th, les cellules de données des td, et thead et tbody regroupent l’en-tête et le corps. Ce générateur écrit exactement cette structure, et thead et th n’apparaissent que si la case Ligne d’en-tête est cochée.

th désigne une cellule d’en-tête et td une cellule de données. Les navigateurs affichent th en gras et centré par défaut, et les technologies d’assistance l’annoncent comme l’intitulé des cellules en dessous. Ici la première ligne devient des cellules th dans un thead si Ligne d’en-tête est cochée ; sinon toutes les cellules, première ligne comprise, sont écrites en td.

Non. La grille reste toujours rectangulaire : chaque ligne reçoit le même nombre de cellules et aucun attribut colspan ou rowspan n’est écrit. Si vous avez besoin de cellules fusionnées, construisez d’abord le tableau ici, copiez le HTML, puis ajoutez colspan="2" ou rowspan="2" à la cellule dans votre éditeur et supprimez les cellules qu’elle recouvre.

Passez le format de sortie de HTML à HTML + CSS. Cette version imprime un bloc style avec les règles .fwt-table, .fwt-table th et .fwt-table td, plus une règle nth-child(even) pour l’alternance et une règle tbody tr:hover si ces cases sont cochées, suivi d’un balisage propre sans aucun attribut style, uniquement class="fwt-table".

Deux réglages entrent en jeu. Si Bordure est décochée, les cellules ne reçoivent qu’un border-bottom : vous voyez des filets horizontaux et aucun trait vertical. Si elle est cochée, les traits prennent la teinte du sélecteur Couleur de bordure, et la valeur par défaut #e5e7eb est un gris très clair presque invisible sur fond blanc. Choisissez une couleur plus sombre et la grille apparaît.

Cochez Responsive et choisissez la sortie Bootstrap ou Tailwind. Bootstrap enveloppe le tableau dans un div de classe table-responsive et Tailwind dans un div overflow-x-auto : un tableau large défile horizontalement au lieu de casser la mise en page. La case n’a aucun effet sur les sorties HTML, HTML + CSS, Markdown ou CSV, identiques dans les deux cas.

Oui. Sélectionnez la plage dans Excel, Google Sheets ou Numbers et copiez-la : les tableurs placent du texte séparé par des tabulations dans le presse-papiers. Collez-le dans le champ Importer des données et cliquez sur Importer TSV. La grille est reconstruite, les compteurs Lignes et Colonnes se mettent à jour et les lignes trop courtes sont complétées par des cellules vides.

Utilisez la sortie HTML simple dans les trois cas. Elle porte chaque couleur, bordure et marge en attribut style directement sur l’élément, ce qui lui permet de survivre aux éditeurs et aux clients de messagerie qui suppriment un bloc style. Dans WordPress, collez-la dans un bloc HTML personnalisé ; dans Blogger, passez en vue HTML plutôt qu’en mode Rédiger.

Oui, ce sont deux formats de sortie. Markdown complète chaque colonne avec des espaces pour que la source reste alignée et ajoute la ligne de séparation sous l’en-tête, ce qui transforme l’exemple de six lignes en sept lignes. CSV écrit une ligne par rangée et n’entoure un champ de guillemets que s’il contient une virgule, un guillemet ou un saut de ligne, en doublant les guillemets internes.

Oui, pour des données tabulaires : grilles tarifaires, listes de caractéristiques, horaires, résultats. Ce qui est obsolète, c’est l’usage des tableaux pour la mise en page, technique des années 1990 remplacée par CSS Grid et Flexbox. Tout ce que ce générateur produit est un tableau de données avec en-tête, lignes et cellules, exactement ce qu’attendent moteurs de recherche et lecteurs d’écran.