ToolDeck

CSV به جدول HTML

تبدیل CSV به جدول HTML

یک مثال امتحان کنید

ورودی CSV

خروجی HTML

به‌صورت محلی اجرا می‌شود · جای‌گذاری اسرار امن است
جدول 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 کامل با ساختار صحیح thead و tbody دریافت کنید. بدون نوشتن دستی تگ، بدون شمارش سلول‌ها در هر سطر.
🔒
پردازش با حفظ حریم خصوصی
تمام تبدیل در مرورگر شما با استفاده از JavaScript اجرا می‌شود. داده CSV شما هرگز به سرور ارسال، ثبت یا ذخیره نمی‌شود.
🎯
خروجی پاک و معتبر
HTML تولیدشده از HTML Living Standard با تودرتوسازی صحیح پیروی می‌کند: table > thead/tbody > tr > th/td. کاراکترهای خاص برای جلوگیری از مشکلات نمایش به موجودیت تبدیل می‌شوند.
📋
فرمت‌های ورودی انعطاف‌پذیر
کاما، سمی‌کالن، تب و پایپ را به‌عنوان جداکننده به‌صورت خودکار تشخیص می‌دهد. قوانین نقل‌قول RFC 4180 از جمله گیومه دوتایی escape‌شده و فیلدهای چندسطری را مدیریت می‌کند.

موارد استفاده تبدیل CSV به جدول HTML

توسعه فرانت‌اند
یک جدول HTML از داده‌های نمونه برای نمونه‌سازی یک مؤلفه رابط کاربری تولید کنید. خروجی را مستقیماً در قالب React، Vue یا Angular کپی کرده و کلاس‌های CSS اعمال کنید.
ساختن قالب ایمیل
کلاینت‌های ایمیل (Outlook، Gmail) جداول HTML را به‌طور قابل‌اطمینان نمایش می‌دهند اما اکثر روش‌های چیدمان CSS را پشتیبانی نمی‌کنند. یک لیست مخاطبین یا گزارش CSV را به جدولی تبدیل کنید که می‌توانید در یک ایمیل HTML جاسازی کنید.
محتوای سایت استاتیک
یک جدول HTML تولیدشده را مستقیماً در صفحه Jekyll، Hugo یا Astro خود قرار دهید، زمانی که داده از یک صفحه‌گسترده صادر شده است. نیازی به پلاگین زمان ساخت نیست.
نمایش داده‌های آزمون QA
یک ماتریس آزمون CSV را به جدول HTML برای درج در گزارش آزمون یا صفحه Confluence تبدیل کنید. بررسی‌کنندگان می‌توانند نتایج را بدون باز کردن برنامه صفحه‌گسترده مرور کنند.
روزنامه‌نگاری داده
یک مجموعه داده CSV را به جدول HTML تبدیل کنید که می‌توان آن را قالب‌بندی کرده و در مقاله CMS جاسازی کرد. پس از تبدیل CSS برای خطوط متناوب، مرتب‌سازی یا پوشش واکنش‌گرا اضافه کنید.
آموزش و مستندسازی
نمونه‌های جدول HTML از داده‌های واقعی CSV برای آموزش‌ها، مستندات API یا مواد درسی بسازید. دانش‌آموزان هم فرمت منبع و هم خروجی نمایش‌داده‌شده را می‌بینند.

مرجع عناصر جدول HTML

یک جدول HTML با ساختار مناسب از عناصر معنایی استفاده می‌کند که سرصفحه‌ها، بدنه و پاورقی را جدا می‌کنند. صفحه‌خوان‌ها و موتورهای جستجو از این عناصر برای درک ساختار جدول استفاده می‌کنند. گروه‌بندی سطرها با thead، tbody و tfoot به مرورگرها اجازه می‌دهد پیمایش مستقل و تکرار سطرهای سرصفحه در چاپ را اعمال کنند.

عنصرنقشیادداشت‌ها
<table>Table rootWraps the entire table structure
<thead>Header groupContains header rows; browsers repeat on print page breaks
<tbody>Body groupContains data rows; enables independent scrolling with CSS
<tfoot>Footer groupSummary or totals row; renders after tbody
<tr>Table rowGroups cells horizontally
<th>Header cellBold and centered by default; supports scope attribute for accessibility
<td>Data cellStandard content cell; accepts any inline or block HTML
<caption>Table captionVisible title above the table; read by screen readers first
<colgroup>Column groupApplies width or style to entire columns without per-cell classes

مقایسه CSV و جدول HTML

CSV یک فرمت انتقالی بهینه‌شده برای سادگی است، در حالی که HTML یک فرمت نمایشی بهینه‌شده برای رندر، دسترس‌پذیری و تعامل در مرورگرها است.

CSV
فرمت متن ساده. بدون نوع داده: هر مقدار یک رشته است. بدون قالب‌بندی، بدون تودرتوسازی، بدون ابرداده. سطرها با خط جدید و فیلدها با جداکننده جدا می‌شوند. حجم فایل حداقل است. توسط صفحه‌گسترده‌ها، پایگاه‌های داده و ابزارهای ETL پشتیبانی گسترده می‌شود. تعریف‌شده در RFC 4180.
HTML Table
فرمت نشانه‌گذاری با ساختار معنایی. سرصفحه‌ها (th) را از داده (td) متمایز می‌کند. از صفاتی مانند colspan، rowspan، scope و class برای قالب‌بندی و دسترس‌پذیری پشتیبانی می‌کند. توسط مرورگرها به DOM تجزیه می‌شود تا CSS و JavaScript بتوانند با آن تعامل داشته باشند. می‌تواند با کتابخانه‌هایی مانند DataTables بدون هیچ پردازش سمت سرور مرتب‌سازی، فیلتر یا صفحه‌بندی شود.

نمونه‌های کد

روش تبدیل برنامه‌ای CSV به جداول HTML در زبان‌های مختلف به این صورت است. هر نمونه سطر سرصفحه را جداگانه مدیریت می‌کند و موجودیت‌های HTML را در محتوای سلول escape می‌کند. این قطعه‌کدها آماده استفاده در یک اسکریپت، خط لوله ساخت یا endpoint API بک‌اند هستند که گزارش‌های HTML از صادرات داده تولید می‌کنند.

JavaScript (browser / Node.js)
// 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>
Python
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
<?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>
CLI (awk / csvtool)
# 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

سوالات متداول

چگونه CSV را به جدول HTML تبدیل کنم؟
CSV خود را در پانل ورودی بچسبانید. مبدل هر سطر را تجزیه می‌کند، سطر اول را به عناصر th درون thead نگاشت می‌کند و سطرهای باقی‌مانده را در عناصر td درون tbody می‌پوشاند. خروجی یک جدول HTML کامل و آماده کپی است.
آیا HTML تولیدشده دسترس‌پذیر است؟
خروجی از عناصر thead و th استفاده می‌کند که اطلاعات ساختاری درباره جدول را به صفحه‌خوان‌ها می‌دهند. برای انطباق کامل با WCAG 2.1، باید صفات scope به سلول‌های سرصفحه و یک عنصر caption که محتوای جدول را توصیف می‌کند اضافه کنید.
با کاراکترهای خاص مانند < و & در CSV چه اتفاقی می‌افتد؟
مبدل همه کاراکترهای حساس HTML را escape می‌کند: < به &lt;، > به &gt;، & به &amp; و گیومه دوتایی به &quot; تبدیل می‌شود. این از شکسته شدن نشانه‌گذاری جلوگیری می‌کند و در صورت جاسازی جدول در یک صفحه وب از آسیب‌پذیری‌های XSS محافظت می‌کند.
آیا می‌توانم فایل جداشده با سمی‌کالن یا تب را تبدیل کنم؟
بله. ابزار جداکننده را با تحلیل سطر اول ورودی شما به‌صورت خودکار تشخیص می‌دهد. از کاما، سمی‌کالن، تب و پایپ پشتیبانی می‌کند. نیازی به پیش‌تبدیل فایل به فرمت CSV ندارید.
تفاوت بین CSV به HTML و CSV به جدول Markdown چیست؟
CSV به HTML نشانه‌گذاری قابل نمایش در مرورگر با عناصر معنایی (thead، tbody، th، td) تولید می‌کند و از قالب‌بندی از طریق کلاس‌های CSS پشتیبانی می‌کند. CSV به Markdown جداول متن ساده جداشده با پایپ تولید می‌کند که در README‌های GitHub و مستندات استفاده می‌شوند. وقتی به کنترل قالب‌بندی یا سازگاری ایمیل نیاز دارید HTML استفاده کنید؛ برای مستندات و مخازن Markdown استفاده کنید.
آیا مبدل فایل‌های CSV با فیلدهای نقل‌قول‌دار را مدیریت می‌کند؟
بله. تجزیه‌کننده از قوانین RFC 4180 پیروی می‌کند: فیلدهای محصور در گیومه دوتایی می‌توانند شامل کاما، خط جدید و گیومه دوتایی تحت‌اللفظی (escape‌شده به‌صورت دو گیومه دوتایی متوالی) باشند. گیومه‌ها از خروجی حذف می‌شوند و محتوای فیلد درون سلول HTML قرار می‌گیرد.
آیا می‌توانم جدول HTML تولیدشده را با CSS قالب‌بندی کنم؟
خروجی HTML ساده بدون استایل یا کلاس inline است، بنابراین می‌توانید هر CSS دلخواهی اعمال کنید. یک کلاس به عنصر table اضافه کنید، سپس از انتخاب‌گرهایی مانند table th برای سرصفحه‌ها، table td برای سلول‌ها و table tr:nth-child(even) برای خطوط متناوب استفاده کنید. فریم‌ورک‌هایی مانند Bootstrap و Tailwind کلاس‌های کاربردی جدول داخلی دارند.