CSV to HTML Table
CSV को HTML टेबल में बदलें
CSV इनपुट
HTML आउटपुट
CSV से HTML टेबल रूपांतरण क्या है?
CSV से HTML टेबल रूपांतरण अल्पविराम-पृथक मानों को संरचित HTML मार्कअप में बदलता है जिसे ब्राउज़र table के रूप में render कर सकते हैं। आउटपुट HTML Living Standard में परिभाषित मानक HTML टेबल तत्वों का उपयोग करता है: table, thead, tbody, tr, th, और td। यह प्रक्रिया प्रत्येक CSV पंक्ति को एक tr तत्व से और प्रत्येक फ़ील्ड को एक td या th सेल से मैप करती है।
CSV फ़ाइलें डेटा को plain text के रूप में संग्रहीत करती हैं — पंक्तियाँ नई लाइन से और फ़ील्ड delimiter (सामान्यतः अल्पविराम) से अलग होती हैं। Excel, Google Sheets और डेटाबेस जैसे अनुप्रयोगों के बीच डेटा संग्रहण और स्थानांतरण के लिए CSV उपयोगी है, लेकिन इसमें प्रस्तुति परत नहीं होती। HTML टेबल वह परत जोड़ती हैं — डेटा को semantic मार्कअप में लपेटकर CSS से स्टाइलिंग, JavaScript से sorting और scope तथा aria-label जैसी विशेषताओं से accessibility का समर्थन करती हैं।
रूपांतरण को RFC 4180 में परिभाषित कई edge cases संभालने होते हैं: अल्पविराम या नई लाइन वाले उद्धृत फ़ील्ड, फ़ील्ड में एस्केप किए गए double quotes, और भिन्न delimiter (सेमीकोलन, टैब, पाइप)। एक सही कनवर्टर सेल सामग्री में HTML entities भी एस्केप करता है — <, >, & और उद्धरण वर्णों को उनके entity समकक्षों से बदलकर टूटे मार्कअप और XSS कमजोरियों को रोकता है।
CSV to HTML टेबल कनवर्टर का उपयोग क्यों करें?
HTML टेबल हाथ से बनाना थकाऊ और error-prone है, विशेषकर जब डेटासेट में दर्जनों स्तंभ या सैकड़ों पंक्तियाँ हों। यह कनवर्टर पार्सिंग, एस्केपिंग और फ़ॉर्मेटिंग एक ही चरण में संभालता है।
CSV to HTML टेबल के उपयोग के मामले
HTML टेबल तत्व संदर्भ
एक सुव्यवस्थित HTML टेबल semantic तत्वों का उपयोग करती है जो शीर्षक, मुख्य भाग और पाद को अलग करते हैं। स्क्रीन रीडर और खोज इंजन इन तत्वों का उपयोग टेबल की संरचना समझने के लिए करते हैं। thead, tbody, और tfoot से पंक्तियाँ समूहित करने पर ब्राउज़र स्वतंत्र स्क्रॉलिंग लागू कर सकते हैं और print लेआउट में शीर्षक पंक्तियाँ दोहरा सकते हैं।
| तत्व | भूमिका | टिप्पणियाँ |
|---|---|---|
| <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 बनाम HTML टेबल
CSV एक परिवहन फ़ॉर्मेट है जो सरलता के लिए अनुकूलित है, जबकि HTML एक प्रस्तुति फ़ॉर्मेट है जो ब्राउज़र में प्रस्तुति, accessibility और इंटरएक्टिविटी के लिए अनुकूलित है।
कोड उदाहरण
विभिन्न भाषाओं में CSV को HTML टेबल में प्रोग्रामेटिक रूप से बदलने का तरीका यहाँ दिया गया है। प्रत्येक उदाहरण शीर्षक पंक्ति को अलग से संभालता है और सेल सामग्री में HTML entities एस्केप करता है। ये code snippets किसी script, build pipeline, या ऐसे backend API endpoint में उपयोग के लिए तैयार हैं जो डेटा निर्यात से HTML रिपोर्ट उत्पन्न करता है।
// 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