CSV to HTML Table

Wat is CSV naar HTML-tabel conversie?

CSV naar HTML-tabel conversie neemt kommagescheiden waarden en transformeert deze naar gestructureerde HTML-markup die browsers kunnen weergeven als een visuele tabel. De uitvoer gebruikt standaard HTML-tabelelementen gedefinieerd in de HTML Living Standard: table, thead, tbody, tr, th en td. Dit proces mapt elke CSV-rij naar een tr-element en elk veld naar een td- of th-cel.

CSV-bestanden slaan gegevens op als platte tekst waarbij rijen worden gescheiden door nieuwe regels en velden worden gescheiden door scheidingstekens (doorgaans komma's). Hoewel CSV goed werkt voor gegevensopslag en uitwisseling tussen toepassingen zoals Excel, Google Sheets en databases, heeft het geen presentatielaag. HTML-tabellen voegen die laag toe door gegevens te omhullen met semantische markup die styling met CSS, sorteren met JavaScript en toegankelijkheid via attributen zoals scope en aria-label ondersteunt.

De conversie moet meerdere randgevallen afhandelen die zijn gedefinieerd in RFC 4180: aangehaalde velden met komma's of nieuwe regels, geëscapete aanhalingstekens binnen velden, en wisselende scheidingstekens (puntkomma's, tabs, pipes). Een correcte converter escaped ook HTML-entiteiten in celinhoud, waarbij <, >, & en aanhalingstekens worden vervangen door hun entiteitsequivalenten om kapotte markup of XSS-kwetsbaarheden te voorkomen.

Waarom een CSV naar HTML-tabel converter gebruiken?

HTML-tabellen handmatig bouwen is omslachtig en foutgevoelig, vooral voor datasets met tientallen kolommen of honderden rijen. Deze converter regelt het parsen, escapen en opmaken in één stap.

Gebruikssituaties voor CSV naar HTML-tabel

Referentie HTML-tabelelementen

Een goed gestructureerde HTML-tabel gebruikt semantische elementen die kopteksten, body en voettekst scheiden. Schermlezers en zoekmachines gebruiken deze elementen om de tabelstructuur te begrijpen. Rijen groeperen met thead, tbody en tfoot stelt browsers in staat onafhankelijk te scrollen en koptekstrijen te herhalen in afdruklay-outs.

CSV vs HTML-tabel

CSV is een transportformaat geoptimaliseerd voor eenvoud, terwijl HTML een presentatieformaat is geoptimaliseerd voor weergave, toegankelijkheid en interactiviteit in browsers.

Codevoorbeelden

Hieronder zie je hoe je CSV programmatisch naar HTML-tabellen kunt converteren in verschillende talen. Elk voorbeeld verwerkt de koptekstrij afzonderlijk en escaped HTML-entiteiten in celinhoud. Deze fragmenten zijn klaar om direct te gebruiken in een script, een build-pipeline of een backend API-eindpunt dat HTML-rapporten genereert uit data-exports.

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

Veelgestelde vragen