Convertisseur CSV vers Tableau HTML
Convertit des fichiers CSV en un extrait HTML utilisant le balisage <table><tr><td>. Choisissez le délimiteur, si la première ligne sert d'en-tête et si les lignes doivent être encadrées par <thead>/<tbody>. Le résultat est prévisualisé en direct et peut être copié ou téléchargé. La conversion s'effectue entièrement dans votre navigateur ; aucune donnée n'est envoyée à un serveur.
| Délimiteur |
|
|---|---|
| Utiliser la première ligne comme en-tête | |
| Encadrer avec thead/tbody |
Aperçu
Code HTML
Copié !Saisissez des données CSV pour voir ici le tableau HTML généré.
Comment une ligne CSV correspond à un tableau HTML
| Une ligne CSV | name,age,city |
|---|---|
| Balisage HTML résultant | <tr><td>name</td><td>age</td><td>city</td></tr> |
Lorsque la première ligne est utilisée comme en-tête, elle devient une ligne de balises <th> ; chaque ligne suivante devient une ligne de balises <td>.
Ce qu'est la conversion d'un CSV en tableau HTML
Écrire un tableau en HTML impose d'aligner un <tr> par ligne et un <td> par cellule, ce qui est laborieux à la main. Cet outil lit un CSV et le convertit en un fragment HTML sous forme de <table>. Le résultat s'aperçoit sur place, si bien que vous voyez avant de copier comment il se présentera à destination.
Les caractères <, > et & présents dans les cellules sont convertis automatiquement en entités HTML : des données contenant ces symboles ne disloquent donc pas l'affichage. Vous pouvez en outre choisir d'entourer ou non le tableau de thead et tbody. Sémantiquement, il vaut mieux les inclure, mais dans les environnements à l'interprétation incertaine — le courriel HTML au premier chef — la forme minimale sans eux se tient mieux.
Comment bâtir un tableau HTML
- Coller le CSV Collez le CSV dans le champ de saisie. Si vous l'avez copié depuis un tableur, changez le séparateur pour la tabulation.
-
Trancher sur la ligne d'en-tête
Activez l'option correspondante et la première ligne sera émise avec des balises
<th>. - Décider de thead et tbody En règle générale, vous pouvez les laisser activés. Désactivez-les pour les environnements à l'affichage incertain, comme le courriel HTML.
- Vérifier l'aperçu et copier Regardez le tableau tel qu'il est réellement rendu et, s'il convient, copiez le code HTML et collez-le.
Astuces pour en tirer le meilleur parti
- Pour un e-mail HTML ou un ancien CMS sans prise en charge de Markdown, la sortie minimale sans thead/tbody est souvent plus simple à utiliser.
- Tout
<,>ou&présent dans une cellule est automatiquement échappé en entité HTML, si bien que coller le code généré ne casse pas la mise en page. - L'aperçu affiche le tableau converti exactement comme le ferait un navigateur, ce qui permet de vérifier son rendu avant de copier le code.
- Combinez cet outil avec les outils jumeaux CSV vers Markdown et CSV vers JSON pour convertir un même CSV dans le format dont vous avez besoin.
Quand la conversion d'un CSV en HTML rend service
Mettre un tableau sur un blog ou un CMS
Même sur un CMS dépourvu de Markdown, coller dans le mode d'édition HTML permet de publier un tableau.
Insérer un tableau dans un courriel HTML
Le courriel n'interprète pas le Markdown : un tableau exige donc du HTML. La forme minimale, thead et tbody retirés, se tient mieux.
Fabriquer une maquette avant la réalisation
Au stade de la conception des écrans, vous transformez sur-le-champ en HTML un tableau proche des données réelles. Cela sert aussi à vérifier l'application des styles.
Publier sans risque des données comportant des symboles
Les valeurs contenant des chevrons ou des esperluettes sont échappées automatiquement, la mise en page ne se disloque donc pas à destination.
Le vocabulaire des tableaux HTML
- L'élément table
- La balise HTML qui représente un tableau. Pour son usage propre — exprimer des données réelles à lignes et colonnes — elle demeure aujourd'hui encore la bonne balise.
- th et td
<th>est une cellule d'en-tête,<td>une cellule de données. Les distinguer permet aux lecteurs d'écran de transmettre leur correspondance.- thead et tbody
- Des balises qui séparent sémantiquement la partie d'en-tête de la partie du corps. Elles jouent aussi sur la répétition de l'en-tête à l'impression d'un long tableau.
- Entité HTML
- Une écriture qui affiche les symboles sans risque.
<est ainsi remplacé par<. - Mise en page par tableaux
- L'ancienne technique consistant à bâtir toute la structure en colonnes d'une page à partir de balises de tableau. Elle est aujourd'hui tenue pour un anti-patron caractérisé.
Questions Fréquentes
<table> standard, qui peut être collé directement dans le mode d'édition HTML de WordPress ou dans le corps d'un e-mail HTML.
Anecdote — Pourquoi la balise <table> refuse de disparaître
À la fin des années 1990, aux débuts du Web, la « mise en page par tableaux » — construire toute la structure d'une page avec des balises <table> — était la norme. CSS offrait alors très peu de possibilités de mise en page, et les tableaux étaient à peu près le seul moyen concret d'organiser du contenu en plusieurs colonnes, si bien que le code HTML de l'époque regorgeait d'éléments <table> n'ayant aucun rapport avec des données tabulaires.
Aujourd'hui, CSS a mûri et Flexbox ainsi que Grid sont largement répandus, si bien qu'utiliser des tableaux pour la mise en page est considéré comme un anti-pattern bien connu. Mais pour son usage d'origine — représenter de vraies données organisées en lignes et en colonnes — <table> reste le choix le plus approprié et le plus accessible, car les lecteurs d'écran peuvent annoncer la relation entre les cellules <th> et <td>.
Le besoin de coller du contenu CSV dans un article de blog ou une newsletter reste courant aujourd'hui, car les e-mails HTML ne peuvent pas restituer Markdown et certains CMS n'ont pas de plugin Markdown. Un outil qui convertit en un clic le résultat d'un tableur en tableau HTML répond à ce besoin pratique simple mais toujours présent.