Générateur de tableau HTML
Générez du code de tableau HTML à partir d'un éditeur visuel. Ajoutez des lignes et des colonnes, définissez des en-têtes et des options de style. Exportez du HTML propre avec des styles intégrés ou des classes CSS.
Rows:3
Columns:4
Border style
Edit Table
Comment utiliser Générateur de tableau HTML
- 1Définissez le nombre de lignes et de colonnes.
- 2Cliquez sur les cellules pour modifier leur contenu.
- 3Basculez la ligne d'en-tête et choisissez le style de bordure.
- 4Copiez le code de tableau HTML généré.
ZenovayAnalytics
Sachez ce que vos visiteurs font vraiment.
- Suivi des visiteurs en temps réel
- Vie privée d'abord, sans bandeau cookies
- Installé en deux minutes
Outils connexes
Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.Questions fréquemment posées
Quelle est la structure de base d'un tableau HTML ?▾
<table> : élément englobant. <thead> : section d'en-tête du tableau (optionnel mais recommandé). <tbody> : corps du tableau. <tfoot> : pied de tableau (optionnel). <tr> : rangée de tableau (dans thead, tbody ou tfoot). <th> : cellule d'en-tête de tableau — gras et centré par défaut, a l'attribut scope. <td> : cellule de données de tableau. Exemple : <table><thead><tr><th>Nom</th><th>Âge</th></tr></thead><tbody><tr><td>Alice</td><td>30</td></tr></tbody></table>.
Comment ajouter des bordures aux tableaux HTML ?▾
L'attribut HTML border est déprécié. Utilisez CSS : table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; }. border-collapse: collapse fait fusionner les bordures adjacentes en une seule ; border-collapse: separate (par défaut) conserve des bordures séparées. Pour les rangées rayées : tr:nth-child(even) { background: #f9f9f9; }. Pour le survol : tr:hover { background: #f0f0f0; }.
Que sont colspan et rowspan ?▾
colspan : combien de colonnes une cellule couvre. rowspan : combien de rangées une cellule couvre. Exemple : <td colspan="2">couvre 2 colonnes</td>. Utilisé pour les cellules fusionnées, comme un en-tête couvrant plusieurs colonnes ou une cellule couvrant plusieurs rangées. Lors de l'utilisation de colspan/rowspan, les cellules couvertes sont retirées du HTML — le tableau s'affiche quand même correctement. La plupart des convertisseurs tableur-vers-HTML gèrent cela automatiquement.
Comment rendre les tableaux HTML accessibles ?▾
Ajoutez scope aux cellules d'en-tête : <th scope="col">Colonne</th> ou <th scope="row">En-tête de rangée</th>. Utilisez <caption> pour le titre du tableau. Ajoutez les attributs id/headers pour les tableaux complexes : <th id="h1">Nom</th>, <td headers="h1">Alice</td>. Utilisez role="table" pour les éléments HTML non-tableau utilisés comme tableaux. Évitez d'utiliser des tableaux pour la mise en page — utilisez CSS Grid ou Flexbox à la place. Les lecteurs d'écran annoncent le nombre de colonnes/rangées et naviguent par cellule avec les touches fléchées.
Comment rendre les tableaux HTML responsives ?▾
Encapsulez dans un conteneur défilable : <div style="overflow-x:auto"><table>...</table></div>. Cela permet le défilement horizontal sur les petits écrans. Techniques plus avancées : masquez les colonnes moins importantes sur mobile avec CSS (display:none à un point de rupture), utilisez les attributs data-label + CSS pour afficher les étiquettes lorsque les colonnes se réduisent, ou convertissez en cartes sur mobile : table { width:100% } td { display:block; } td::before { content:attr(data-label); }. Des bibliothèques comme DataTables gèrent automatiquement le comportement responsive.