Softonic

Générateur de tableaux HTML

Les données collées, les cellules et le HTML généré restent dans ce navigateur. Les étapes du parcours utilisent le stockage de session de cet onglet ; les valeurs ne sont ni envoyées à nos serveurs ni ajoutées à l'URL.

Étape 1 / 4

Les champs CSV entre guillemets, les tabulations de tableur, les lignes séparées par des points-virgules et les séparateurs Markdown sont pris en charge. Maximum : 50 lignes, 20 colonnes et 1 000 caractères par cellule.

Données du tableau
Données du tableau

Écrire <table>, <thead>, <tbody> et <tr> à la main pour un ensemble de données de dix lignes est fastidieux. Collez des données de tableau séparées par des tabulations, CSV ou Markdown et ce générateur produit un HTML bien structuré avec des balises sémantiques, une <caption> optionnelle, des attributs de portée appropriés et un choix de rayures zébrées, de bordures ou de classes Tailwind, prêt à être intégré dans un article ou un tableau de bord.

Comment construire un tableau HTML

  1. 1

    Collez vos données

    TSV (copié depuis un tableur), CSV ou syntaxe de tableau Markdown sont tous analysés correctement.

  2. 2

    Choisissez les options du tableau

    Ligne d'en-tête, légende, rayures zébrées, lignes compactes ou spacieuses.

  3. 3

    Choisissez le mode de style

    HTML simple, styles en ligne, classes Bootstrap ou classes Tailwind.

  4. 4

    Copiez le balisage

    La sortie est un HTML valide et sémantique, pas une grille `<div>` prétendant être un tableau.

Structure de tableau sémantique

Les tableaux construits avec des balises appropriées sont accessibles, compatibles avec les lecteurs d’écran et faciles à styliser. Le générateur produit cette structure :

<table>
  <caption>Chiffres de ventes T1</caption>
  <thead>
    <tr>
      <th scope="col">Région</th>
      <th scope="col">T1</th>
      <th scope="col">T2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">UE</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Éléments et leurs rôles

Élément But
<caption> Résumé du tableau, lu en premier par les lecteurs d’écran
<thead> En-têtes de colonnes, rendus séparément du corps
<tbody> Lignes de données
<tfoot> Totaux, notes de bas de page, placés en bas indépendamment de la position du code
<th scope="col"> En-tête de colonne
<th scope="row"> En-tête de ligne (par exemple, première cellule de chaque ligne)
<td> Cellule de données

Modèles réactifs

  • Défilement horizontal : enveloppez le tableau dans <div style="overflow-x:auto"> afin que les vues étroites puissent défiler plutôt que de casser la mise en page.
  • Empiler sur mobile : répétez les en-têtes en tant qu’attributs data-label et inversez les lignes en cartes verticales via CSS, bon pour les petits ensembles de données.
  • Reflux avec la grille : les tableaux complexes peuvent être reconstruits avec CSS Grid, mais perdent la navigation au clavier native ; seulement utile pour les tableaux de bord.

Liste de contrôle d’accessibilité

  • Chaque <th> a un attribut scope.
  • Les spans complexes utilisent headers="..." pour lier les cellules de données aux ID d’en-tête.
  • Une légende résume l’objectif du tableau.
  • N’utilisez pas de tableaux pour la mise en page visuelle, utilisez CSS Grid ou Flexbox.

Questions fréquentes

Oui. Les données du presse-papiers du tableur sont en TSV (séparées par des tabulations), que le générateur analyse nativement. Les lignes deviennent <tr> et les cellules séparées par des tabulations deviennent <td>.

Des classes CSS pour tout ce que vous contrôlez ; des styles en ligne pour les e-mails (où les feuilles de style externes sont souvent bloquées). Les modes Bootstrap et Tailwind produisent un balisage de classe prêt à l’emploi pour ces frameworks.

Pas automatiquement. Chaque valeur importée devient une cellule. Après avoir copié le HTML, ajoutez vous-même colspan ou rowspan et vérifiez les associations d’en-têtes, car les cellules fusionnées peuvent nécessiter les attributs id et headers.

Oui, les attributs scope="col" et scope="row" sont ajoutés, et une <caption> est produite lorsque vous en fournissez une. Vérifiez avec un lecteur d’écran ou l’extension axe DevTools pour des tableaux complexes.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.

Convertisseur Base64 en Hex

Convertissez une chaîne Base64 en ses octets sous-jacents exprimés en hexadécimal. Utile pour inspecter des jetons, des clés, des certificats et des JWT.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Convertisseur binaire en ASCII

Collez du binaire (octets séparés par des espaces ou un long flux de bits) et obtenez le texte ASCII qu'il représente. Gère les encodages de 7 bits et 8 bits.