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: الحقول المحاطة بعلامات اقتباس التي تحتوي على فواصل أو أسطر جديدة، وعلامات الاقتباس المزدوجة المُدرجة داخل الحقول، والمحدِّدات المتنوعة (فاصلة منقوطة، مسافات جدولية، شريطة عمودية). يُرمِّز المحوّل الصحيح أيضاً كيانات HTML في محتوى الخلايا، مستبدلاً < و> و& وعلامات الاقتباس بما يقابلها من كيانات لتجنب الترميز المكسور وثغرات XSS.
لماذا تستخدم محولاً من CSV إلى جدول HTML؟
بناء جداول HTML يدوياً عملية شاقة وعرضة للأخطاء، لا سيما عند التعامل مع مجموعات بيانات تحتوي على عشرات الأعمدة أو مئات الصفوف. يتولى هذا المحوّل التحليل والترميز والتنسيق في خطوة واحدة.
حالات استخدام تحويل 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 في محتوى الخلايا. هذه المقتطفات جاهزة للإدراج في سكريبت أو سلسلة بناء أو نقطة نهاية 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