CSV na Tabelę HTML

Czym jest konwersja CSV na tabelę HTML?

Konwersja CSV na tabelę HTML przekształca wartości rozdzielone przecinkami w ustrukturyzowany znacznik HTML, który przeglądarki renderują jako wizualną tabelę. Wynik używa standardowych elementów tabeli HTML zdefiniowanych w HTML Living Standard: table, thead, tbody, tr, th oraz td. Proces ten mapuje każdy wiersz CSV na element tr, a każde pole na komórkę td lub th.

Pliki CSV przechowują dane jako zwykły tekst, gdzie wiersze są rozdzielone znakami nowej linii, a pola — separatorami (zazwyczaj przecinkami). Choć CSV sprawdza się przy przechowywaniu i przesyłaniu danych między aplikacjami takimi jak Excel, Google Sheets czy bazy danych, nie ma warstwy prezentacji. Tabele HTML dodają tę warstwę, owijając dane w semantyczny znacznik obsługujący stylowanie przez CSS, sortowanie przez JavaScript oraz dostępność dzięki atrybutom takim jak scope i aria-label.

Konwersja musi obsługiwać kilka przypadków brzegowych zdefiniowanych w RFC 4180: pola w cudzysłowach zawierające przecinki lub znaki nowej linii, cudzysłowy ucieczki wewnątrz pól oraz różne separatory (średniki, tabulatory, kreski pionowe). Poprawny konwerter zastępuje też encje HTML w treści komórek, zamieniając znaki <, >, & i cudzysłowy na ich odpowiedniki encji, aby zapobiec uszkodzonemu znacznikowi lub podatnościom XSS.

Dlaczego warto używać konwertera CSV na tabelę HTML?

Ręczne budowanie tabel HTML jest żmudne i podatne na błędy, zwłaszcza przy zbiorach danych z dziesiątkami kolumn lub setkami wierszy. Ten konwerter obsługuje parsowanie, ucieczkę encji i formatowanie w jednym kroku.

Przypadki użycia CSV na tabelę HTML

Dokumentacja elementów tabeli HTML

Dobrze zbudowana tabela HTML używa elementów semantycznych oddzielających nagłówki, treść i stopkę. Czytniki ekranu i wyszukiwarki korzystają z tych elementów, aby zrozumieć strukturę tabeli. Grupowanie wierszy za pomocą thead, tbody i tfoot pozwala przeglądarkom stosować niezależne przewijanie i powtarzać wiersze nagłówka w układach wydruku.

CSV a tabela HTML

CSV to format transportowy zoptymalizowany pod kątem prostoty, podczas gdy HTML to format prezentacyjny zoptymalizowany pod kątem renderowania, dostępności i interaktywności w przeglądarkach.

Przykłady kodu

Oto jak programowo konwertować CSV na tabele HTML w różnych językach. Każdy przykład obsługuje wiersz nagłówka oddzielnie i zastępuje encje HTML w treści komórek. Te fragmenty kodu są gotowe do wstawienia do skryptu, potoku budowania lub punktu końcowego API generującego raporty HTML z eksportów danych.

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

Najczęściej zadawane pytania