CSV en tableau HTML

Qu'est-ce que la conversion CSV en tableau HTML ?

La conversion CSV en tableau HTML prend des valeurs séparées par des virgules et les transforme en balisage HTML structuré que les navigateurs peuvent afficher sous forme de tableau visuel. Le résultat utilise les éléments HTML standard définis dans le HTML Living Standard : table, thead, tbody, tr, th et td. Ce processus associe chaque ligne CSV à un élément tr et chaque champ à une cellule td ou th.

Les fichiers CSV stockent les données en texte brut, avec des lignes séparées par des sauts de ligne et des champs séparés par des délimiteurs (généralement des virgules). Si CSV fonctionne bien pour le stockage et le transfert de données entre des applications comme Excel, Google Sheets et des bases de données, il ne possède pas de couche de présentation. Les tableaux HTML ajoutent cette couche en enveloppant les données dans un balisage sémantique qui prend en charge la mise en style avec CSS, le tri avec JavaScript et l'accessibilité via des attributs comme scope et aria-label.

La conversion doit gérer plusieurs cas particuliers définis dans la RFC 4180 : les champs entre guillemets contenant des virgules ou des sauts de ligne, les guillemets doubles échappés à l'intérieur des champs, et les délimiteurs variables (points-virgules, tabulations, pipes). Un convertisseur correct échappe également les entités HTML dans le contenu des cellules, en remplaçant <, >, & et les guillemets par leurs équivalents d'entité, afin d'éviter un balisage cassé ou des failles XSS.

Pourquoi utiliser un convertisseur CSV en tableau HTML ?

Créer des tableaux HTML à la main est fastidieux et source d'erreurs, surtout pour des jeux de données avec des dizaines de colonnes ou des centaines de lignes. Ce convertisseur prend en charge l'analyse, l'échappement et la mise en forme en une seule étape.

Cas d'usage du convertisseur CSV en tableau HTML

Référence des éléments de tableau HTML

Un tableau HTML bien structuré utilise des éléments sémantiques qui séparent les en-têtes, le corps et le pied de tableau. Les lecteurs d'écran et les moteurs de recherche utilisent ces éléments pour comprendre la structure du tableau. Regrouper les lignes avec thead, tbody et tfoot permet aux navigateurs d'appliquer un défilement indépendant et de répéter les lignes d'en-tête dans les mises en page imprimées.

CSV vs tableau HTML

CSV est un format de transport optimisé pour la simplicité, tandis que HTML est un format de présentation optimisé pour le rendu, l'accessibilité et l'interactivité dans les navigateurs.

Exemples de code

Voici comment convertir du CSV en tableaux HTML par programmation dans différents langages. Chaque exemple traite la ligne d'en-tête séparément et échappe les entités HTML dans le contenu des cellules. Ces extraits sont prêts à être intégrés dans un script, un pipeline de build ou un endpoint d'API backend qui génère des rapports HTML à partir d'exports de données.

// CSV string → HTML table with thead/tbody
const csv = `name,age,city
Alice,30,Berlin
Bob,25,Tokyo`

function csvToHtmlTable(csv) {
  const rows = csv.trim().split('\n').map(r => r.split(','))
  const [headers, ...data] = rows
  const ths = headers.map(h => `<th>${h}</th>`).join('')
  const trs = data.map(row =>
    '    <tr>' + row.map(c => `<td>${c}</td>`).join('') + '</tr>'
  ).join('\n')
  return `<table>
  <thead><tr>${ths}</tr></thead>
  <tbody>
${trs}
  </tbody>
</table>`
}

console.log(csvToHtmlTable(csv))
// → <table><thead><tr><th>name</th>...</tr></thead><tbody>...</tbody></table>

import csv, io, html

csv_string = """name,age,city
Alice,30,Berlin
Bob,25,Tokyo"""

reader = csv.reader(io.StringIO(csv_string))
headers = next(reader)

lines = ['<table>', '  <thead>', '    <tr>']
for h in headers:
    lines.append(f'      <th>{html.escape(h)}</th>')
lines += ['    </tr>', '  </thead>', '  <tbody>']

for row in reader:
    lines.append('    <tr>')
    for cell in row:
        lines.append(f'      <td>{html.escape(cell)}</td>')
    lines.append('    </tr>')

lines += ['  </tbody>', '</table>']
print('\n'.join(lines))
# → well-formed HTML table with escaped special characters

<?php
$csv = "name,age,city\nAlice,30,Berlin\nBob,25,Tokyo";
$rows = array_map('str_getcsv', explode("\n", trim($csv)));
$headers = array_shift($rows);

echo "<table>\n  <thead>\n    <tr>\n";
foreach ($headers as $h) {
    echo "      <th>" . htmlspecialchars($h) . "</th>\n";
}
echo "    </tr>\n  </thead>\n  <tbody>\n";

foreach ($rows as $row) {
    echo "    <tr>\n";
    foreach ($row as $cell) {
        echo "      <td>" . htmlspecialchars($cell) . "</td>\n";
    }
    echo "    </tr>\n";
}
echo "  </tbody>\n</table>";
// → <table><thead>...<th>name</th>...</thead><tbody>...</tbody></table>

# Using awk — quick one-liner for simple CSV (no quoted fields)
awk -F, 'NR==1{print "<table><thead><tr>";for(i=1;i<=NF;i++)print "<th>"$i"</th>";print "</tr></thead><tbody>"}
NR>1{print "<tr>";for(i=1;i<=NF;i++)print "<td>"$i"</td>";print "</tr>"}
END{print "</tbody></table>"}' data.csv

# Using Python one-liner for RFC 4180-compliant parsing
python3 -c "
import csv, sys, html
r=csv.reader(sys.stdin); h=next(r)
print('<table><thead><tr>')
print(''.join(f'<th>{html.escape(c)}</th>' for c in h))
print('</tr></thead><tbody>')
for row in r:
    print('<tr>'+''.join(f'<td>{html.escape(c)}</td>' for c in row)+'</tr>')
print('</tbody></table>')
" < data.csv

Questions fréquentes