Créer un tableau HTML et son CSS

Réglez la taille, les couleurs et la surbrillance : l'aperçu et le code HTML/CSS à copier se mettent à jour aussitôt.

Fonctionne localement dans votre navigateur

Comment générer un tableau HTML avec son CSS

Choisissez le nombre de colonnes et de lignes, un thème de couleurs et le comportement au survol : l'aperçu et le code HTML/CSS à copier se mettent à jour aussitôt.

Le tableau est généré dans le navigateur : rien n'est envoyé, l'aperçu et le code correspondent au même balisage, et le code copié ne contient ni filigrane ni lien externe.

  1. Réglez Colonnes (1–50) et Lignes (1–100). Le nombre de lignes comprend la ligne d'en-tête : 7 lignes donnent un en-tête et six lignes de cellules.
  2. Choisissez un style : Bleu, Vert, Gris, Orange, Marron, Noir ou Sans couleur. Avec Sans couleur, le design passe automatiquement à Sans style.
  3. Choisissez la mise en forme : lignes alternées, en-tête coloré et lignes blanches, ou aucun style.
  4. Décidez si les cellules affichent un texte d'exemple (Ligne:1 Cellule:1) ou restent vides, et si les lignes doivent être surlignées au survol.
  5. Cliquez sur Copier le HTML pour mettre le code dans le presse-papiers, puis collez-le dans votre page.

Le balisage généré, ses limites et la règle de survol

Ce que contient le code généré

Le champ contient un bloc <style> suivi du tableau : un <table class="tftable" border="1"> avec la ligne d'en-tête dans <thead> et les lignes de cellules dans <tbody>. Le CSS ne vise que cette classe : deux tableaux générés ici peuvent donc cohabiter sur une même page sans identifiants uniques.

L'aperçu ci-dessous affiche exactement le même balisage : ce que vous voyez est ce que produit le code copié. Les textes d'exemple (En-tête 1, Ligne:1 Cellule:1) sont écrits dans la langue de la page, et le résultat ne contient ni filigrane ni lien externe.

Limites de taille et saisies invalides

Les colonnes vont de 1 à 50 et les lignes de 1 à 100. Tant qu'un champ est vide ou hors de cette plage, la ligne d'état au-dessus du code rappelle la plage et le tableau conserve sa dernière taille valide au lieu de se vider.

En quittant le champ, la valeur est ramenée à la limite la plus proche : 999 devient 50 et un champ vide revient au dernier nombre valide. Les lettres sont supprimées à la saisie : 12abc devient 12.

Surbrillance des lignes, couleurs et copie

La surbrillance est générée sous forme de règle CSS (table.tftable tbody tr:hover) et non de script : le tableau collé n'a besoin ni de JavaScript ni d'identifiant. Les couleurs proviennent de six palettes fixes ; le style Sans style ne laisse que l'attribut border.

Copier le HTML copie le contenu actuel du champ. Le code ne va que dans le presse-papiers : la page n'envoie vos réglages à aucun serveur.

Outils récents :