Da CSV a Tabella HTML

Cos'è la conversione da CSV a tabella HTML?

La conversione da CSV a tabella HTML prende valori separati da virgole e li trasforma in markup HTML strutturato che i browser possono visualizzare come tabella. L'output utilizza gli elementi standard definiti nell'HTML Living Standard: table, thead, tbody, tr, th e td. Ogni riga CSV viene mappata a un elemento tr e ogni campo a una cella td o th.

I file CSV memorizzano i dati come testo semplice con righe separate da interruzioni di riga e campi separati da delimitatori (in genere virgole). Sebbene il CSV sia ottimo per l'archiviazione e il trasferimento di dati tra applicazioni come Excel, Google Sheets e database, non ha un livello di presentazione. Le tabelle HTML aggiungono quel livello racchiudendo i dati in markup semantico che supporta la formattazione con CSS, l'ordinamento con JavaScript e l'accessibilità tramite attributi come scope e aria-label.

La conversione deve gestire diversi casi limite definiti nell'RFC 4180: campi racchiusi tra virgolette contenenti virgole o interruzioni di riga, virgolette doppie escapate all'interno dei campi e delimitatori variabili (punto e virgola, tab, pipe). Un convertitore corretto esegue anche l'escaping delle entità HTML nel contenuto delle celle, sostituendo <, >, & e le virgolette con i corrispondenti caratteri di entità, per evitare markup non valido o vulnerabilità XSS.

Perché usare un convertitore da CSV a tabella HTML?

Costruire tabelle HTML a mano è tedioso e soggetto a errori, soprattutto per dataset con decine di colonne o centinaia di righe. Questo convertitore gestisce il parsing, l'escaping e la formattazione in un unico passaggio.

Casi d'uso del convertitore da CSV a tabella HTML

Riferimento agli elementi della tabella HTML

Una tabella HTML ben strutturata utilizza elementi semantici che separano intestazioni, corpo e piè di pagina. Gli screen reader e i motori di ricerca usano questi elementi per comprendere la struttura della tabella. Raggruppare le righe con thead, tbody e tfoot consente ai browser di applicare lo scrolling indipendente e di ripetere le righe di intestazione nei layout di stampa.

CSV vs tabella HTML

Il CSV è un formato di trasporto ottimizzato per la semplicità, mentre l'HTML è un formato di presentazione ottimizzato per il rendering, l'accessibilità e l'interattività nei browser.

Esempi di codice

Ecco come convertire CSV in tabelle HTML in modo programmatico in diversi linguaggi. Ogni esempio gestisce la riga di intestazione separatamente ed esegue l'escaping delle entità HTML nel contenuto delle celle. Questi snippet sono pronti per essere inseriti in uno script, una pipeline di build o un endpoint API backend che genera report HTML da esportazioni di dati.

// 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

Domande frequenti