แปลง CSV เป็นตาราง HTML
แปลง CSV เป็นตาราง HTML
ป้อน CSV
เอาต์พุต HTML
การแปลง CSV เป็นตาราง HTML คืออะไร?
การแปลง CSV เป็นตาราง HTML นำค่าที่คั่นด้วยเครื่องหมายจุลภาคมาแปลงเป็น HTML markup ที่มีโครงสร้าง ซึ่งเบราว์เซอร์สามารถแสดงผลเป็นตารางที่มองเห็นได้ ผลลัพธ์ใช้องค์ประกอบตารางมาตรฐาน HTML ตาม HTML Living Standard ได้แก่ table, thead, tbody, tr, th และ td กระบวนการนี้แปลงแต่ละแถวของ CSV เป็นองค์ประกอบ tr และแต่ละฟิลด์เป็นเซลล์ td หรือ th
ไฟล์ CSV จัดเก็บข้อมูลเป็นข้อความธรรมดา โดยแถวคั่นด้วยบรรทัดใหม่และฟิลด์คั่นด้วยตัวคั่น (โดยทั่วไปคือเครื่องหมายจุลภาค) แม้ CSV เหมาะสำหรับการจัดเก็บและถ่ายโอนข้อมูลระหว่างแอปพลิเคชัน เช่น Excel, Google Sheets และฐานข้อมูล แต่ไม่มีชั้นการนำเสนอ ตาราง HTML เพิ่มชั้นนั้นโดยห่อข้อมูลใน markup เชิงความหมาย ซึ่งรองรับการกำหนดสไตล์ด้วย CSS การเรียงลำดับด้วย JavaScript และการเข้าถึงด้วยแอตทริบิวต์ เช่น scope และ aria-label
การแปลงต้องจัดการกรณีพิเศษหลายอย่างตามที่ RFC 4180 กำหนด ได้แก่ ฟิลด์ที่ใส่เครื่องหมายอัญประกาศซึ่งมีเครื่องหมายจุลภาคหรือบรรทัดใหม่ เครื่องหมายอัญประกาศคู่ที่ถูก escape ภายในฟิลด์ และตัวคั่นที่หลากหลาย (เซมิโคลอน แท็บ ไปป์) ตัวแปลงที่ถูกต้องยังต้อง escape HTML entity ในเนื้อหาเซลล์ด้วย โดยแทนที่อักขระ <, >, & และเครื่องหมายอัญประกาศด้วย entity ที่เทียบเท่า เพื่อป้องกัน markup ที่เสียหายหรือช่องโหว่ XSS
ทำไมต้องใช้ตัวแปลง CSV เป็นตาราง HTML?
การสร้างตาราง HTML ด้วยมือเป็นงานที่น่าเบื่อและเกิดข้อผิดพลาดได้ง่าย โดยเฉพาะชุดข้อมูลที่มีหลายสิบคอลัมน์หรือหลายร้อยแถว ตัวแปลงนี้จัดการการ parse การ escape และการจัดรูปแบบในขั้นตอนเดียว
กรณีการใช้งานของการแปลง CSV เป็นตาราง HTML
อ้างอิงองค์ประกอบตาราง HTML
ตาราง HTML ที่มีโครงสร้างดีใช้องค์ประกอบเชิงความหมายที่แยกหัวตาราง เนื้อหา และท้ายตาราง Screen reader และเครื่องมือค้นหาใช้องค์ประกอบเหล่านี้เพื่อทำความเข้าใจโครงสร้างตาราง การจัดกลุ่มแถวด้วย 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 vs ตาราง HTML
CSV เป็นรูปแบบการขนส่งที่ออกแบบมาเพื่อความเรียบง่าย ในขณะที่ HTML เป็นรูปแบบการนำเสนอที่ออกแบบมาเพื่อการแสดงผล การเข้าถึง และการโต้ตอบในเบราว์เซอร์
ตัวอย่างโค้ด
นี่คือวิธีแปลง CSV เป็นตาราง HTML โดยอัตโนมัติในภาษาต่างๆ แต่ละตัวอย่างจัดการแถวหัวตารางแยกต่างหากและ escape HTML entity ในเนื้อหาเซลล์ โค้ดเหล่านี้พร้อมนำไปใช้ใน script, pipeline การ build หรือ 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