CSV به جدول HTML
تبدیل CSV به جدول HTML
ورودی CSV
خروجی HTML
تبدیل CSV به جدول HTML چیست؟
تبدیل CSV به جدول HTML مقادیر جداشده با کاما را به نشانهگذاری ساختاریافته HTML تبدیل میکند که مرورگرها میتوانند آن را بهصورت جدول بصری نمایش دهند. خروجی از عناصر استاندارد جدول HTML تعریفشده در HTML Living Standard استفاده میکند: table، thead، tbody، tr، th و td. این فرآیند هر سطر CSV را به یک عنصر tr و هر فیلد را به یک سلول td یا th نگاشت میکند.
فایلهای CSV داده را بهصورت متن ساده ذخیره میکنند که سطرها با خط جدید و فیلدها با جداکننده (معمولاً کاما) از هم جدا میشوند. در حالی که CSV برای ذخیرهسازی داده و انتقال بین برنامههایی مانند Excel، Google Sheets و پایگاههای داده مناسب است، لایه نمایشی ندارد. جداول HTML این لایه را با قراردادن داده در نشانهگذاری معنایی اضافه میکنند که از قالببندی با CSS، مرتبسازی با JavaScript و دسترسپذیری از طریق صفات مانند scope و aria-label پشتیبانی میکند.
این تبدیل باید چندین حالت خاص تعریفشده در RFC 4180 را مدیریت کند: فیلدهای نقلقولدار حاوی کاما یا خط جدید، گیومه دوتایی escapeشده درون فیلدها و جداکنندههای متغیر (سمیکالن، تب، پایپ). یک مبدل صحیح همچنین موجودیتهای HTML را در محتوای سلول escape میکند و کاراکترهای <، >، & و گیومه را با معادلهای موجودیتیشان جایگزین میکند تا از شکستن نشانهگذاری یا آسیبپذیریهای XSS جلوگیری شود.
چرا از مبدل CSV به جدول HTML استفاده کنیم؟
ساختن جداول HTML بهصورت دستی خستهکننده و مستعد خطا است، بهویژه برای مجموعه دادههایی با دهها ستون یا صدها سطر. این مبدل تجزیه، escape کردن و قالببندی را در یک مرحله انجام میدهد.
موارد استفاده تبدیل CSV به جدول HTML
مرجع عناصر جدول HTML
یک جدول HTML با ساختار مناسب از عناصر معنایی استفاده میکند که سرصفحهها، بدنه و پاورقی را جدا میکنند. صفحهخوانها و موتورهای جستجو از این عناصر برای درک ساختار جدول استفاده میکنند. گروهبندی سطرها با thead، tbody و tfoot به مرورگرها اجازه میدهد پیمایش مستقل و تکرار سطرهای سرصفحه در چاپ را اعمال کنند.
| عنصر | نقش | یادداشتها |
|---|---|---|
| <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 یک فرمت نمایشی بهینهشده برای رندر، دسترسپذیری و تعامل در مرورگرها است.
نمونههای کد
روش تبدیل برنامهای CSV به جداول HTML در زبانهای مختلف به این صورت است. هر نمونه سطر سرصفحه را جداگانه مدیریت میکند و موجودیتهای HTML را در محتوای سلول escape میکند. این قطعهکدها آماده استفاده در یک اسکریپت، خط لوله ساخت یا endpoint API بکاند هستند که گزارشهای 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