Convertir un CSV en tableau HTML

Comment ça marche

Sélectionnez un tableau dans Excel, copiez-le (Ctrl+C) et collez-le dans le panneau de gauche : les cellules arrivent séparées par des tabulations et le code HTML apparaît à droite. Un fichier .csv enregistré depuis un Excel en français utilise des points-virgules, parce que la virgule y sert de séparateur décimal ; ouvrez-le dans le Bloc-notes ou TextEdit, copiez son contenu et collez-le : le point-virgule est reconnu sans réglage. Avec l'exemple « Produit;Quantité;Prix » suivi de trois lignes, vous obtenez un <table> avec un <thead> contenant trois <th> et un <tbody> de trois lignes. Le montant 1 250,00 reste écrit tel quel : l'outil ne touche pas aux nombres. « Assiette ; porcelaine », entre guillemets, reste une seule cellule. Une ligne plus courte que les autres est complétée par des <td></td> vides, pour que le tableau garde des colonnes alignées. Dans WordPress, collez le résultat dans un bloc « HTML personnalisé » ; dans un autre CMS, passez l'éditeur en mode code source avant de coller. Pour une newsletter ou un e-mail, choisissez « Bordures et lignes alternées » : le style est écrit dans chaque balise, parce que Gmail et Outlook suppriment souvent les blocs <style>.

Cet outil est aussi connu sous le nom de csv en html, convertir csv en tableau html, excel en tableau html, csv to html table.

Qu'est-ce que Tableau HTML ?

Un tableau HTML est décrit par la balise <table> : chaque ligne est un <tr>, chaque cellule de données un <td> et chaque cellule d'en-tête un <th>. L'en-tête se place dans un <thead> et les données dans un <tbody>. Cette structure permet aux lecteurs d'écran d'annoncer le nom de la colonne pour chaque cellule, et aux navigateurs de répéter l'en-tête à l'impression d'un long tableau.

Qu'est-ce que Échappement HTML ?

Échapper, c'est remplacer les caractères qui ont un sens en HTML par leur entité : < par &lt;, > par &gt;, & par &amp;. Le navigateur affiche alors le caractère au lieu de l'interpréter. Sans cela, une cellule contenant « <script> » pourrait exécuter du code sur votre page, et une cellule « a < b » pourrait couper le reste du tableau.

Quelle différence entre un fichier CSV et un tableau HTML ?

Le CSV est une donnée brute : des cellules séparées par un signe, sans mise en forme, faites pour être lues par Excel ou un programme. Le tableau HTML est une présentation : il décrit comment afficher ces cellules dans une page, avec des en-têtes, des bordures et des couleurs éventuelles. Gardez le CSV pour échanger ou retravailler les données ; prenez le HTML pour publier le tableau sur un site ou dans un e-mail.

Pourquoi chaque cellule est échappée

Une cellule qui contient « <b> » ou « Dupont & Fils » ne doit pas être prise pour du code. Chaque cellule passe donc par un échappement HTML : & devient &amp;, < devient &lt;, > devient &gt;, et les guillemets et l'apostrophe sont aussi remplacés. Une cellule « <script> » s'affiche comme du texte et ne s'exécute jamais.

Revers de la médaille : si vous vouliez vraiment un lien ou du gras dans une cellule, il apparaîtra en toutes lettres. Ajoutez ces balises à la main dans le code obtenu, cellule par cellule.

Le séparateur entre guillemets fait partie de la donnée : dans "Assiette ; porcelaine", le point-virgule ne crée pas de colonne, et un retour à la ligne entre guillemets reste dans la même cellule. Un guillemet doublé ("") donne un guillemet simple.

• & → &amp; · < → &lt; · > → &gt;
• " → &quot; · ' → &#x27; · ` → &#x60;
• Ligne courte → complétée par des <td></td> vides

Quel réglage selon l'endroit où va le tableau ?

Page d'un site ou d'un blog : gardez « HTML simple ». Le tableau ne porte aucun style et reprend celui de votre thème ; c'est aussi la forme la plus facile à modifier plus tard.

E-mail, newsletter, signature : choisissez « Bordures et lignes alternées ». Les clients e-mail ignorent souvent les feuilles de style ; le style en ligne (attribut style dans chaque balise) est la seule forme qu'ils gardent de façon fiable.

Tableau sans en-tête, comme une liste de valeurs brutes : choisissez « Des données » ; toutes les lignes deviennent des <td> et aucun <thead> n'est écrit. Si les colonnes sortent fusionnées en une seule, vérifiez que le fichier a bien un séparateur régulier ; la note indique celui qui a été détecté.

Questions fréquentes

Comment transformer un tableau Excel en tableau HTML ?

Sélectionnez les cellules dans Excel, copiez-les et collez-les dans le panneau de gauche. Les tabulations sont reconnues comme séparateur et le code <table> apparaît aussitôt à droite. Copiez-le ou téléchargez-le en fichier .html.

Où coller le code dans WordPress ?

Ajoutez un bloc « HTML personnalisé » dans l'éditeur de blocs et collez-y le code. Dans l'éditeur classique, passez sur l'onglet « Texte » avant de coller. Avec « HTML simple », le tableau prend le style de votre thème.

Pourquoi mon tableau s'affiche-t-il sans bordures dans l'e-mail ?

Avec « HTML simple », le code ne contient aucun style, et un client e-mail n'a pas de feuille de style pour le tableau. Choisissez « Bordures et lignes alternées » : bordures, couleurs et marges sont écrites dans chaque balise, et Gmail comme Outlook les conservent.

Mes données sont-elles envoyées à un serveur ?

Non. La lecture du CSV et la production du code HTML se font entièrement dans votre navigateur ; aucune donnée ne quitte votre appareil et rien n'est enregistré. Une fois la page ouverte, l'outil fonctionne même sans connexion Internet.