CSV to HTML Table
Převést CSV na HTML tabulku
Vstup CSV
Výstup HTML
Co je převod CSV na HTML tabulku?
Převod CSV na HTML tabulku vezme hodnoty oddělené čárkami a transformuje je do strukturovaného HTML kódu, který prohlížeče dokáží vykreslit jako vizuální tabulku. Výstup využívá standardní elementy HTML tabulky definované v HTML Living Standard: table, thead, tbody, tr, th a td. Každý řádek CSV je namapován na element tr a každé pole na buňku td nebo th.
Soubory CSV ukládají data jako prostý text, přičemž řádky jsou odděleny novými řádky a pole jsou oddělena oddělovači (typicky čárkami). Zatímco CSV funguje dobře pro ukládání a přenos dat mezi aplikacemi jako Excel, Google Sheets a databázemi, nemá žádnou prezentační vrstvu. HTML tabulky tuto vrstvu přidávají tím, že obalují data do sémantického kódu, který podporuje stylování pomocí CSS, řazení pomocí JavaScript a přístupnost prostřednictvím atributů jako scope a aria-label.
Převod musí zpracovat několik okrajových případů definovaných v RFC 4180: pole v uvozovkách obsahující čárky nebo nové řádky, escapované uvozovky uvnitř polí a různé oddělovače (středníky, tabulátory, svislítka). Správný převodník také escapuje HTML entity v obsahu buněk, přičemž nahrazuje <, >, & a uvozovky jejich entitními ekvivalenty, aby zabránil poškození kódu nebo zranitelnostem XSS.
Proč používat převodník CSV na HTML tabulku?
Ruční psaní HTML tabulek je zdlouhavé a náchylné k chybám, zejména u datových sad s desítkami sloupců nebo stovkami řádků. Tento převodník zvládne parsování, escapování i formátování v jednom kroku.
Případy použití převodníku CSV na HTML tabulku
Přehled elementů HTML tabulky
Dobře strukturovaná HTML tabulka využívá sémantické elementy, které oddělují záhlaví, tělo a zápatí. Čtečky obrazovky a vyhledávače tyto elementy používají k pochopení struktury tabulky. Seskupení řádků pomocí thead, tbody a tfoot umožňuje prohlížečům aplikovat nezávislé posouvání a opakovat řádky záhlaví v tiskových rozvrženích.
| Element | Role | Poznámky |
|---|---|---|
| <table> | Table root | Wraps the entire table structure |
| <thead> | Header group | Contains header rows; browsers repeat on print page breaks |
| <tbody> | Body group | Contains data rows; enables independent scrolling with CSS |
| <tfoot> | Footer group | Summary or totals row; renders after tbody |
| <tr> | Table row | Groups cells horizontally |
| <th> | Header cell | Bold and centered by default; supports scope attribute for accessibility |
| <td> | Data cell | Standard content cell; accepts any inline or block HTML |
| <caption> | Table caption | Visible title above the table; read by screen readers first |
| <colgroup> | Column group | Applies width or style to entire columns without per-cell classes |
CSV vs HTML tabulka
CSV je transportní formát optimalizovaný pro jednoduchost, zatímco HTML je prezentační formát optimalizovaný pro vykreslování, přístupnost a interaktivitu v prohlížečích.
Ukázky kódu
Zde je postup pro programatický převod CSV na HTML tabulky v různých jazycích. Každý příklad zpracovává řádek záhlaví zvlášť a escapuje HTML entity v obsahu buněk. Tyto úryvky jsou připraveny k použití ve skriptu, build pipeline nebo backendovém API endpointu, který generuje HTML reporty z datových exportů.
// 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