วิธีแปลง HTML Table เป็น JSON: คู่มือฉบับนักพัฒนา

ตาราง HTML มีอยู่ทั่วไปบนเว็บ ไม่ว่าจะเป็นหน้า pricing, แคตตาล็อกสินค้า, รายงานการเงิน, สถิติกีฬา หรือ dashboard ภายในองค์กร แต่ปัญหาคือ <table> เป็น "presentation format" คือสร้างมาเพื่อการแสดงผล ไม่ใช่ "data format" ในทางปฏิบัติ ราวกับว่าเมื่อไหร่ที่ต้องเอาข้อมูลตารางเหล่านั้นไปเลี้ยง API, กราฟ, database หรือ frontend สมัยใหม่ คุณต้องแปลงมันเป็น structured data เสียก่อน และ JSON ก็คือมาตรฐานกลางของ structured data บนเว็บยุคนี้

การนั่งพิมพ์เนื้อหาตารางเป็น JSON เองนั้นช้าและผิดพลาดง่าย ส่วนการเขียน custom parser ให้ทุกตารางที่เจอก็เป็นงานเกินจำเป็น HTML Table to JSON ถูกสร้างมาเพื่อจุดนี้: วาง markup ของตารางลงไป แล้วรับ JSON ที่สะอาดและมี type ถูกต้องกลับมาในไม่กี่วินาที พร้อมจัดการเรื่องยาก ๆ อย่างการตรวจจับ header, merged cells และรูปแบบผลลัพธ์หลากหลายให้เรียบร้อย ทั้งหมดประมวลผลใน browser ของคุณเอง ฟรี และไม่ต้องสมัครสมาชิก

ในคู่มือนี้ เราจะพาไปดูว่าทำไมการแปลงนี้ถึงสำคัญ เครื่องมือทำงานอย่างไร แต่ละ output format เหมาะกับงานแบบไหน และ use case ที่นำไปใช้ได้จริงวันนี้

ทำไมต้องใช้ HTML Table to JSON?

• ตารางสร้างเพื่อแสดงผล แต่ JSON คือข้อมูลจริง — HTML table บอกว่าข้อมูล "หน้าตาเป็นอย่างไรบนหน้าเว็บ" ส่วน JSON บอกว่าข้อมูล "คืออะไร" การแปลงระหว่างสองอย่างนี้คือก้าวแรกที่ทำให้ข้อมูลตารางถูกนำไปใช้เชิงโปรแกรมได้
• API และ frontend ฝั่ง modern รับ JSON เป็นหลัก — ไม่ว่าจะเป็น React, Vue, REST API หรือ serverless function ล้วนกิน JSON ได้โดยตรง ถ้าส่ง HTML ดิบเข้าไปเท่ากับเขียน parsing code เพิ่มโดยไม่จำเป็น
• การแปลงมือไม่มีวัน scale — copy-paste ตาราง 5 แถวยังพอทำได้ แต่ตารางหลายร้อยแถวไม่มีทางไหว ระบบอัตโนมัติตัด bottleneck นี้ทิ้งไปเลย
• Merged cells ทำให้ parser ธรรมดาพัง — ตารางในโลกจริงใช้ rowspan และ colspan สำหรับ grouped header และแถวสรุป converter ที่ดีต้องเข้าใจ attribute เหล่านี้ แทนที่จะเลื่อน column เพี้ยนเงียบ ๆ
• Type ของค่าสำคัญ — cell ที่ใส่ 12 ควรกลายเป็น JSON number 12 ไม่ใช่ string "12" การแปลง type อัตโนมัติช่วยล้างข้อมูลให้เรียบร้อยตั้งแต่ต้นทาง
• ข้อมูล sensitive ควรอยู่ในเครื่องคุณ — เพราะ tool ประมวลผลฝั่ง client ทั้งหมด HTML ของคุณไม่เคยถูกส่งออกจากเครื่อง ซึ่งสำคัญมากเมื่อทำงานกับรายงานภายในหรือข้อมูลที่ยังไม่เปิดเผย

ฟีเจอร์เด่น

• กลไกตรวจจับ header เป็น 3 ชั้น — หากไม่พบ thead เครื่องมือจะใช้แถวแรกเป็น header (ปิด/เปิดได้ผ่าน toggle) และถ้าไม่มี header เลยก็จะสร้าง key แบบ Column 1, Column 2 ... ให้อัตโนมัติ เพื่อให้ทุกกรณีได้ JSON ที่ใช้งานได้เสมอ
• เลือกรูปแบบตามผู้รับปลายทาง — งาน API ใช้แบบหนึ่ง งาน spreadsheet ใช้อีกแบบหนึ่ง รายละเอียดอยู่ในหัวข้อถัดไป

วิธีใช้งาน

1. เปิดหน้า HTML Table to JSON บนเบราว์เซอร์ของคุณ
2. วาง markup ของตาราง HTML ลงในช่อง input (คัดลอกจาก View Source, DevTools หรือไฟล์ที่มีอยู่)
3. เลือก output format ที่ต้องการ: Array of Objects, Array of Arrays หรือ Object by Key
4. ปรับ option เสริม — เปิด/ปิด "ใช้แถวแรกเป็น header" และ pretty print ตามต้องการ
5. กดปุ่มแปลง ตรวจสอบ JSON ผลลัพธ์ แล้ว copy ไปใช้งานหรือ download เป็นไฟล์

เข้าใจรูปแบบผลลัพธ์ทั้ง 3 แบบ

หัวใจของเครื่องมือนี้คือความยืดหยุ่นของ output format เพราะ "JSON ที่ดี" ขึ้นอยู่กับว่าใครจะเป็นคนกินข้อมูลนั้น

Array of Objects (ค่าเริ่มต้น)

แต่ละแถวกลายเป็น object หนึ่งตัว โดยใช้ header เป็น key — เหมาะกับ API, React component และโค้ดที่ต้องเข้าถึงค่าด้วยชื่อ field:

[
  { "Name": "Bolt", "Qty": 12 },
  { "Name": "Nut", "Qty": 48 }
]

Array of Arrays

คงโครงสร้างแถว-คอลัมน์แบบเดิมไว้ โดยมี header เป็นแถวแรก — เหมาะกับการส่งต่อเข้า spreadsheet, Google Sheets หรือ charting library ที่รับข้อมูลเป็น matrix:

[
  ["Name", "Qty"],
  ["Bolt", 12],
  ["Nut", 48]
]

Object by Key

แต่ละแถวถูก index ด้วย key อัตโนมัติ (row_1, row_2, ...) — เหมาะกับการเก็บเป็น lookup table หรือ document แบบเข้าถึงรายแถวเร็ว ๆ:

{
  "row_1": { "Name": "Bolt", "Qty": 12 },
  "row_2": { "Name": "Nut", "Qty": 48 }
}

ข้อสังเกตร่วมกันทุก format: ค่า 12 และ 48 เป็น number ไม่ใช่ string เพราะเครื่องมือแปลง type ให้อัตโนมัติ

use case ที่พบบ่อย

1. Web scraping และการดึงข้อมูล

สมมติว่าคุณต้องการข้อมูลสถิติจากเว็บไซต์หนึ่งที่แสดงผลเป็นตาราง แทนที่จะเขียน parser เองทั้งหมด ให้คัดลอก markup ตารางจาก DevTools มาวางใน tool แล้วรับ JSON ที่พร้อมเข้า pipeline ทันที แนวทางนี้เหมาะกับงาน one-off หรือ prototype ที่ไม่อยากตั้งระบบ scraping เต็มรูปแบบ

2. ย้ายข้อมูลจากรายงาน HTML เก่า

หลายองค์กรมีรายงาน legacy ที่ export เป็น HTML ล้วน ๆ ตารางเหล่านี้มักมี rowspan/colspan เกลื่อน ซึ่งเป็นหนทางตายของ parser ง่าย ๆ เครื่องมือนี้จัดการ merged cells ได้ ทำให้ย้ายข้อมูลเก่าเข้าสู่ระบบใหม่ที่รับ JSON เป็นไปได้โดยไม่ต้องพิมพ์ใหม่

3. เตรียมข้อมูลเข้า API, database หรือกราฟ

Charting library ส่วนใหญ่ (เช่น Chart.js, Recharts) กิน JSON โดยตรง แปลงตารางเป็น Array of Objects แล้วส่งเข้า component ได้เลย หรือจะผ่าน CSV-JSON Converter เพื่อขยับไปมาระหว่างรูปแบบตามที่ system ต้องการก็ได้

4. ทำ pipeline ข้อมูลร่วมกับ spreadsheet

ทีม business จำนวนมากอยู่บน Excel/CSV ส่วนทีม dev อยู่บน JSON — tool นี้ช่วยเป็นสะพาน เอาตาราง HTML มาแปลงเป็น JSON แล้วส่งต่อเข้า JSON to CSV Converter เมื่อต้องส่งไฟล์ให้ฝั่ง business ต่อไป

Best Practices

• ใช้ markup ที่ semantic จากต้นทาง — ตารางที่มี <thead> และ <th> จะได้ header แม่นที่สุด ถ้าคุณควบคุม HTML ได้ ให้ใส่ส่วนเหล่านี้ก่อนแปลง
• ตรวจ header หลังแปลงเสมอ — ถ้าตารางไม่มีแถว header ชัดเจน ให้เช็กว่า first-row fallback ทำงานถูกต้องหรือไม่ หรือปิดมันเสียแล้วใช้ key Column N แบบ generate อัตโนมัติ
• เลือก format ตามผู้บริโภคปลายทาง — Array of Objects สำหรับ API และโค้ดที่ต้อง typed, Array of Arrays สำหรับ spreadsheet และกราฟ, Object by Key สำหรับพวก lookup
• Pretty print ตอน review, compact ตอนใช้งานจริง — output แบบย่อหน้าอ่านง่ายตอน dev ส่วน compact ประหยัดขนาด payload ใน pipeline อัตโนมัติ
• ระวังความหมายของ merged cells — เครื่องมือจะกระจายค่าที่ span ออกไปยังทุก cell ที่ครอบคลุม ซึ่งมักเป็นสิ่งที่ต้องการ แต่ควรเช็กแถวสรุปที่ span เต็มความกว้างของตารางเป็นพิเศษ
• validate ผลลัพธ์ขนาดใหญ่ — สำหรับตารางใหญ่ ให้รันผ่าน JSON Formatter ก่อน commit ลง codebase หรือ database

พร้อมแปลงตารางของคุณแล้วหรือยัง?

เลิกนั่งเขียน JSON จากตาราง HTML ด้วยมือ และเลิก debug parser ใช้ครั้งเดียวทิ้ง เปิด HTML Table to JSON, วาง markup, เลือก format แล้วรับ JSON ที่สะอาดพร้อม type ถูกต้องในไม่กี่วินาที ฟรี ทำงานใน browser ของคุณล้วน ๆ และจัดการรายละเอียดยุ่งยากของโลกจริง — merged cells, header ที่หายไป และค่าตัวเลข — ให้คุณไม่ต้องลงมือเอง

เครื่องมือที่เกี่ยวข้อง:

• CSV-JSON Converter — แปลงไฟล์ CSV เป็น JSON และกลับกัน
• JSON to CSV Converter — เปลี่ยน JSON array เป็น CSV พร้อมใช้กับ spreadsheet
• JSON Formatter — validate, จัดรูปแบบ และ minify JSON

ขอให้สนุกกับการแปลงข้อมูล!