Générateur de tableaux HTML

Créez des tableaux HTML avec un éditeur visuel et copiez le code instantanément.

LignesColonnes Ligne d'en-tête Bordure Lignes zébréesEspacement

Sortie HTML

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

À propos de cet outil

Le générateur de tableaux HTML vous permet de définir des lignes et des colonnes, d'éditer des cellules directement et d'obtenir du code HTML de tableau prêt à l'emploi. Vous pouvez configurer visuellement les lignes d'en-tête, les bordures, les lignes zébrées et le rembourrage des cellules.

Le HTML généré suit un balisage sémantique avec une structure thead et tbody appropriée, ce qui est meilleur pour l'accessibilité et les lecteurs d'écran. Le code se met à jour en temps réel pendant que vous éditez.

Comment utiliser

Définissez le nombre de lignes et de colonnes.
Activez/désactivez la ligne d'en-tête, la bordure et les lignes zébrées avec des cases à cocher.
Ajustez la valeur du rembourrage des cellules.
Cliquez sur n'importe quelle cellule pour saisir votre contenu directement.
Copiez le code sous "Sortie HTML" et utilisez-le dans votre projet.

Cas d'utilisation

Idéal pour les tableaux de comparaison de données, les tableaux de prix, les plannings, les tableaux de spécifications de produits et toute information affichée en format tabulaire sur une page web.

Questions fréquentes

Puis-je styler le tableau sans CSS ? — Oui. Le HTML généré inclut des attributs border et cellpadding, donc un style de base est appliqué sans aucun CSS.
Puis-je ajouter colspan ou rowspan ? — Cet outil génère une structure de tableau de base. Éditez le code généré directement pour ajouter des attributs colspan/rowspan.
Comment rendre le tableau responsive ? — Enveloppez le tableau dans un div avec overflow-x: auto, ou utilisez des media queries CSS pour permettre le défilement horizontal sur les petits écrans.