ToolDeck

แปลง CSV เป็นตาราง HTML

แปลง CSV เป็นตาราง HTML

ลองตัวอย่าง

ป้อน CSV

เอาต์พุต HTML

ประมวลผลในเครื่อง · ปลอดภัยในการวางข้อมูลลับ
ตาราง 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 สมบูรณ์พร้อมโครงสร้าง thead และ tbody ที่ถูกต้อง ไม่ต้องเขียนแท็กเอง ไม่ต้องนับเซลล์ต่อแถว
🔒
ประมวลผลโดยให้ความสำคัญกับความเป็นส่วนตัว
การแปลงทั้งหมดทำงานในเบราว์เซอร์ของคุณโดยใช้ JavaScript ข้อมูล CSV ของคุณไม่เคยถูกส่งไปยังเซิร์ฟเวอร์ ไม่เคยถูกบันทึก และไม่เคยถูกจัดเก็บ
🎯
ผลลัพธ์ที่สะอาดและถูกต้อง
HTML ที่สร้างขึ้นเป็นไปตาม HTML Living Standard พร้อมการซ้อนที่ถูกต้อง: table > thead/tbody > tr > th/td อักขระพิเศษถูก escape เป็น entity เพื่อป้องกันปัญหาการแสดงผล
📋
รองรับรูปแบบอินพุตที่หลากหลาย
ตรวจจับเครื่องหมายจุลภาค เซมิโคลอน แท็บ และไปป์เป็นตัวคั่นโดยอัตโนมัติ รองรับกฎการใส่เครื่องหมายอัญประกาศตาม RFC 4180 รวมถึงเครื่องหมายอัญประกาศคู่ที่ถูก escape และฟิลด์หลายบรรทัด

กรณีการใช้งานของการแปลง CSV เป็นตาราง HTML

การพัฒนา Frontend
สร้างตาราง HTML จากข้อมูลตัวอย่างเพื่อต้นแบบ UI component คัดลอกผลลัพธ์ไปใส่ใน template ของ React, Vue หรือ Angular โดยตรงแล้วนำ CSS class ไปใช้
การสร้าง Email Template
โปรแกรม Email (Outlook, Gmail) แสดงผลตาราง HTML ได้อย่างน่าเชื่อถือแต่ปฏิเสธวิธีการจัดวาง CSS ส่วนใหญ่ แปลงรายชื่อผู้ติดต่อหรือรายงาน CSV เป็นตารางที่คุณสามารถฝังใน HTML email ได้
เนื้อหาเว็บไซต์แบบ Static
นำตาราง HTML ที่สร้างขึ้นใส่ในหน้า Jekyll, Hugo หรือ Astro เมื่อข้อมูลของคุณมาจากการส่งออกสเปรดชีต ไม่ต้องใช้ plugin ในขั้นตอนการ build
การแสดงผลข้อมูลทดสอบ QA
แปลงเมทริกซ์ทดสอบ CSV เป็นตาราง HTML สำหรับรวมไว้ในรายงานการทดสอบหรือหน้า Confluence ผู้ตรวจสอบสามารถดูผลลัพธ์ได้โดยไม่ต้องเปิดแอปพลิเคชันสเปรดชีต
การสื่อสารข้อมูล
เปลี่ยนชุดข้อมูล CSV เป็นตาราง HTML ที่สามารถกำหนดสไตล์และฝังในบทความ CMS ได้ เพิ่ม CSS สำหรับการแสดงแถบสลับสี การเรียงลำดับ หรือการตอบสนองต่อขนาดหน้าจอหลังการแปลง
การสอนและเอกสาร
สร้างตัวอย่างตาราง HTML จากข้อมูล CSV จริงสำหรับบทช่วยสอน เอกสาร API หรือสื่อการเรียน นักศึกษาจะเห็นทั้งรูปแบบต้นฉบับและผลลัพธ์ที่แสดงผลแล้ว

อ้างอิงองค์ประกอบตาราง HTML

ตาราง HTML ที่มีโครงสร้างดีใช้องค์ประกอบเชิงความหมายที่แยกหัวตาราง เนื้อหา และท้ายตาราง Screen reader และเครื่องมือค้นหาใช้องค์ประกอบเหล่านี้เพื่อทำความเข้าใจโครงสร้างตาราง การจัดกลุ่มแถวด้วย 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 vs ตาราง HTML

CSV เป็นรูปแบบการขนส่งที่ออกแบบมาเพื่อความเรียบง่าย ในขณะที่ HTML เป็นรูปแบบการนำเสนอที่ออกแบบมาเพื่อการแสดงผล การเข้าถึง และการโต้ตอบในเบราว์เซอร์

CSV
รูปแบบข้อความธรรมดา ไม่มีชนิดข้อมูล: ทุกค่าเป็นสตริง ไม่มีการกำหนดสไตล์ ไม่มีการซ้อน ไม่มีข้อมูล metadata แถวคั่นด้วยบรรทัดใหม่ ฟิลด์คั่นด้วยตัวคั่น ขนาดไฟล์น้อยที่สุด รองรับโดยสเปรดชีต ฐานข้อมูล และเครื่องมือ ETL ทั่วไป กำหนดโดย RFC 4180
HTML Table
รูปแบบ markup ที่มีโครงสร้างเชิงความหมาย แยกความแตกต่างระหว่างหัวตาราง (th) กับข้อมูล (td) รองรับแอตทริบิวต์เช่น colspan, rowspan, scope และ class สำหรับการกำหนดสไตล์และการเข้าถึง เบราว์เซอร์ parse เป็น DOM สำหรับการโต้ตอบกับ CSS และ JavaScript สามารถเรียงลำดับ กรอง หรือแบ่งหน้าด้วยไลบรารีเช่น DataTables โดยไม่ต้องประมวลผลฝั่งเซิร์ฟเวอร์

ตัวอย่างโค้ด

นี่คือวิธีแปลง CSV เป็นตาราง HTML โดยอัตโนมัติในภาษาต่างๆ แต่ละตัวอย่างจัดการแถวหัวตารางแยกต่างหากและ escape HTML entity ในเนื้อหาเซลล์ โค้ดเหล่านี้พร้อมนำไปใช้ใน script, pipeline การ build หรือ API endpoint แบ็กเอนด์ที่สร้างรายงาน 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 ของคุณลงในแผงอินพุต ตัวแปลงจะ parse แต่ละแถว แมปแถวแรกไปยังองค์ประกอบ th ภายใน thead และห่อแถวที่เหลือด้วยองค์ประกอบ td ภายใน tbody ผลลัพธ์คือตาราง HTML สมบูรณ์ที่พร้อมคัดลอก
HTML ที่สร้างขึ้นสามารถเข้าถึงได้หรือไม่?
ผลลัพธ์ใช้องค์ประกอบ thead และ th ซึ่งให้ข้อมูลโครงสร้างแก่ screen reader เกี่ยวกับตาราง สำหรับการปฏิบัติตาม WCAG 2.1 อย่างครบถ้วน ควรเพิ่มแอตทริบิวต์ scope ในเซลล์หัวตารางและองค์ประกอบ caption ที่อธิบายเนื้อหาตาราง
อักขระพิเศษเช่น < และ & ใน CSV จะเกิดอะไรขึ้น?
ตัวแปลง escape อักขระที่ HTML ไวต่อทั้งหมด: < กลายเป็น &lt;, > กลายเป็น &gt;, & กลายเป็น &amp; และเครื่องหมายอัญประกาศคู่กลายเป็น &quot; ซึ่งป้องกัน markup ที่เสียหายและป้องกัน XSS หากคุณฝังตารางในหน้าเว็บ
แปลงไฟล์ที่คั่นด้วยเซมิโคลอนหรือแท็บได้หรือไม่?
ได้ เครื่องมือตรวจจับตัวคั่นโดยอัตโนมัติโดยการวิเคราะห์แถวแรกของอินพุต รองรับเครื่องหมายจุลภาค เซมิโคลอน แท็บ และไปป์ ไม่จำเป็นต้องแปลงไฟล์เป็นรูปแบบคั่นด้วยเครื่องหมายจุลภาคก่อน
ความแตกต่างระหว่างการแปลง CSV เป็น HTML และ CSV เป็นตาราง Markdown คืออะไร?
CSV เป็น HTML สร้าง markup ที่แสดงผลในเบราว์เซอร์ได้พร้อมองค์ประกอบเชิงความหมาย (thead, tbody, th, td) และรองรับการกำหนดสไตล์ผ่าน CSS class CSV เป็น Markdown สร้างตารางข้อความธรรมดาที่คั่นด้วยไปป์ ใช้ใน GitHub README และเอกสาร ใช้ HTML เมื่อต้องการควบคุมสไตล์หรือความเข้ากันได้กับ email ใช้ Markdown สำหรับเอกสารและ repository
ตัวแปลงจัดการไฟล์ CSV ที่มีฟิลด์ใส่เครื่องหมายอัญประกาศได้หรือไม่?
ได้ ตัว parser ปฏิบัติตามกฎ RFC 4180: ฟิลด์ที่ห่อด้วยเครื่องหมายอัญประกาศคู่สามารถมีเครื่องหมายจุลภาค บรรทัดใหม่ และเครื่องหมายอัญประกาศคู่ตรงๆ (escape เป็นเครื่องหมายอัญประกาศคู่ติดกันสองอัน) เครื่องหมายอัญประกาศจะถูกลบออกจากผลลัพธ์ และเนื้อหาฟิลด์จะถูกวางไว้ภายในเซลล์ HTML
สามารถกำหนดสไตล์ตาราง HTML ที่สร้างขึ้นด้วย CSS ได้หรือไม่?
ผลลัพธ์เป็น HTML ธรรมดาโดยไม่มีสไตล์แบบ inline หรือ class ดังนั้นคุณสามารถนำ CSS ที่ต้องการไปใช้ได้ เพิ่ม class ให้กับองค์ประกอบ table จากนั้นใช้ selector เช่น table th สำหรับหัวตาราง table td สำหรับเซลล์ และ table tr:nth-child(even) สำหรับแถบสลับสี Framework เช่น Bootstrap และ Tailwind มีคลาสสาธารณูปโภคตารางในตัว