CSV'den HTML Tablosuna

CSV'den HTML Tablosuna Dönüşüm Nedir?

CSV'den HTML tablosuna dönüşüm, virgülle ayrılmış değerleri alır ve tarayıcıların görsel tablo olarak oluşturabileceği yapılandırılmış HTML biçimine dönüştürür. Çıktı, HTML Living Standard'da tanımlanan standart HTML tablo öğelerini kullanır: table, thead, tbody, tr, th ve td. Bu işlem her CSV satırını bir tr öğesiyle, her alanı ise bir td veya th hücresiyle eşleştirir.

CSV dosyaları, verileri satırlar yeni satırlarla ve alanlar ayırıcılarla (genellikle virgül) ayrılmış düz metin olarak saklar. CSV, Excel, Google Sheets ve veritabanları gibi uygulamalar arasında veri depolama ve aktarım için iyi çalışsa da sunum katmanı yoktur. HTML tabloları, CSS ile biçimlendirmeyi, JavaScript ile sıralamayı ve scope ile aria-label gibi nitelikler aracılığıyla erişilebilirliği destekleyen anlamsal biçimde verileri sararak bu katmanı ekler.

Dönüşüm, RFC 4180'de tanımlanan çeşitli uç durumları ele almalıdır: virgül veya yeni satır içeren tırnaklı alanlar, alanlar içindeki kaçan çift tırnaklar ve değişen ayırıcılar (noktalı virgül, sekme, dikey çizgi). Doğru bir dönüştürücü aynı zamanda hücre içeriğindeki HTML varlıklarını da kaçar; bozuk biçimlendirmeyi veya XSS açıklarını önlemek için <, >, & ve tırnak karakterlerini varlık karşılıklarıyla değiştirir.

Neden CSV'den HTML Tablosuna Dönüştürücü Kullanmalısınız?

HTML tablolarını elle oluşturmak, özellikle onlarca sütun veya yüzlerce satır içeren veri kümeleri için yorucu ve hataya açıktır. Bu dönüştürücü ayrıştırma, kaçış ve biçimlendirmeyi tek adımda halleder.

CSV'den HTML Tablosuna Kullanım Senaryoları

HTML Tablo Öğesi Referansı

İyi yapılandırılmış bir HTML tablosu, başlıkları, gövdeyi ve alt bilgiyi ayıran anlamsal öğeler kullanır. Ekran okuyucular ve arama motorları, tablo yapısını anlamak için bu öğeleri kullanır. Satırları thead, tbody ve tfoot ile gruplamak, tarayıcıların bağımsız kaydırma uygulamasına ve baskı düzenlerinde başlık satırlarını tekrarlamasına olanak tanır.

CSV ile HTML Tablosu Karşılaştırması

CSV, basitlik için optimize edilmiş bir aktarım biçimiyken HTML, tarayıcılarda oluşturma, erişilebilirlik ve etkileşim için optimize edilmiş bir sunum biçimidir.

Kod Örnekleri

Farklı dillerde CSV'yi HTML tablolarına programlı olarak dönüştürme yöntemi. Her örnek başlık satırını ayrı işler ve hücre içeriğindeki HTML varlıklarını kaçırır. Bu kod parçacıkları bir komut dosyasına, derleme ardışık düzenine veya veri dışa aktarımlarından HTML raporları üreten bir backend API uç noktasına eklenmeye hazırdır.

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

Sık Sorulan Sorular