CSV to HTML Table

Apa itu Konversi CSV ke Tabel HTML?

Konversi CSV ke tabel HTML mengambil nilai yang dipisahkan koma dan mengubahnya menjadi markup HTML terstruktur yang dapat dirender oleh browser sebagai tabel visual. Output menggunakan elemen tabel HTML standar yang didefinisikan dalam HTML Living Standard: table, thead, tbody, tr, th, dan td. Proses ini memetakan setiap baris CSV ke elemen tr dan setiap field ke sel td atau th.

File CSV menyimpan data sebagai teks biasa dengan baris yang dipisahkan oleh newline dan field yang dipisahkan oleh delimiter (biasanya koma). Meskipun CSV cocok untuk penyimpanan data dan transfer antar aplikasi seperti Excel, Google Sheets, dan basis data, format ini tidak memiliki lapisan presentasi. Tabel HTML menambahkan lapisan tersebut dengan membungkus data dalam markup semantik yang mendukung penggayaan dengan CSS, pengurutan dengan JavaScript, dan aksesibilitas melalui atribut seperti scope dan aria-label.

Konversi harus menangani beberapa kasus tepi yang didefinisikan dalam RFC 4180: field yang dikutip yang mengandung koma atau newline, tanda kutip ganda yang di-escape di dalam field, dan delimiter yang bervariasi (titik koma, tab, pipe). Konverter yang benar juga meng-escape entity HTML di konten sel, mengganti karakter <, >, &, dan tanda kutip dengan padanan entity-nya untuk mencegah markup yang rusak atau celah keamanan XSS.

Mengapa Menggunakan Konverter CSV ke Tabel HTML?

Membuat tabel HTML secara manual itu melelahkan dan rawan kesalahan, terutama untuk dataset dengan puluhan kolom atau ratusan baris. Konverter ini menangani parsing, escaping, dan pemformatan dalam satu langkah.

Kasus Penggunaan CSV ke Tabel HTML

Referensi Elemen Tabel HTML

Tabel HTML yang terstruktur dengan baik menggunakan elemen semantik yang memisahkan header, isi, dan footer. Screen reader dan mesin pencari menggunakan elemen-elemen ini untuk memahami struktur tabel. Mengelompokkan baris dengan thead, tbody, dan tfoot memungkinkan browser menerapkan scroll independen dan mengulang baris header dalam tata letak cetak.

CSV vs Tabel HTML

CSV adalah format transport yang dioptimalkan untuk kesederhanaan, sedangkan HTML adalah format presentasi yang dioptimalkan untuk rendering, aksesibilitas, dan interaktivitas di browser.

Contoh Kode

Berikut cara mengonversi CSV ke tabel HTML secara programatik dalam berbagai bahasa pemrograman. Setiap contoh menangani baris header secara terpisah dan meng-escape entity HTML di konten sel. Cuplikan kode ini siap disisipkan ke dalam skrip, pipeline build, atau endpoint API backend yang menghasilkan laporan HTML dari ekspor data.

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

Pertanyaan yang Sering Diajukan