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

ตัวอย่าง: CSV นี้ ได้ตารางแบบนี้

CSV สามบรรทัด บรรทัดที่สองมีจุลภาคอยู่ในเครื่องหมายคำพูด:

ชื่อ,เบอร์โทร,จังหวัด
สมชาย ใจดี,0812345678,"เชียงใหม่, ช้างคลาน"
มะลิ รักไทย,0898765432,ภูเก็ต

และนี่คือโค้ดตารางที่หน้านี้เขียนให้ โดยใช้แถวแรกเป็นหัวตาราง:

<table>
  <thead>
    <tr><th>ชื่อ</th><th>เบอร์โทร</th><th>จังหวัด</th></tr>
  </thead>
  <tbody>
    <tr><td>สมชาย ใจดี</td><td>0812345678</td><td>เชียงใหม่, ช้างคลาน</td></tr>
    <tr><td>มะลิ รักไทย</td><td>0898765432</td><td>ภูเก็ต</td></tr>
  </tbody>
</table>

จุลภาคที่อยู่ในเครื่องหมายคำพูดยังอยู่ในช่องของมัน เบอร์โทรยังมีเลขศูนย์นำหน้า และไม่ต้องแก้อะไรก่อนเอาไปใส่ในหน้าเว็บ

โครงสร้างตาราง HTML: แต่ละแท็กทำหน้าที่อะไร

เอาตารางไปใส่ใน WordPress, Blogger หรือ Google Sites

• WordPress: เพิ่มบล็อก HTML ที่กำหนดเอง (Custom HTML) แล้ววางโค้ดตารางลงไป
• Blogger: สลับหน้าแก้ไขโพสต์เป็น มุมมอง HTML วางตรงที่ต้องการให้ตารางอยู่ แล้วสลับกลับ
• Google Sites: เลือก ฝัง แล้วเลือก ฝังโค้ด จากนั้นวางหน้าเว็บทั้งหน้าที่จัดสวยแล้ว เพราะมีหน้าตาของตัวเองติดมา

วางเฉพาะโค้ดตารางเมื่อเว็บมีสไตล์อยู่แล้วและอยากให้ตารางหน้าตาตามนั้น และวางทั้งหน้าเมื่อเว็บไม่มีสไตล์ให้

คำถามที่พบบ่อย

แปลง CSV เป็นตาราง HTML ทำยังไง

ลากไฟล์มาวางในกรอบด้านบน หรือวางข้อความลงไป ตารางจะถูกสร้างทันที แถวแรกเป็นหัวตารางที่ระบุไว้ถูกต้อง โปรแกรมอ่านหน้าจอและเครื่องมือค้นหาจึงรู้ว่าเป็นหัวตาราง ที่เหลือเป็นแถวข้อมูล จากนั้นคัดลอกโค้ดหรือดาวน์โหลดเป็นไฟล์ .html ได้เลย ถ้าแถวแรกของคุณเป็นข้อมูล ไม่ใช่ชื่อคอลัมน์ ให้ติ๊กตัวเลือกนั้นออก ทุกแถวจะถูกเขียนเป็นแถวข้อมูลธรรมดา

ควรเอาแค่ตาราง หรือเอาทั้งหน้า

เอาแค่ตารางถ้าจะเอาไปใส่ในหน้าที่มีอยู่แล้ว เช่น โพสต์ WordPress, Blogger หรือเทมเพลตของคุณเอง ตารางแบบนี้ไม่มีสไตล์ติดมา จึงใช้หน้าตาตามเว็บของคุณ เอาทั้งหน้าถ้าตารางคือสิ่งที่จะส่งให้คนอื่น ได้ไฟล์ .html ที่สมบูรณ์พร้อมสไตล์ เปิดได้ในทุกเบราว์เซอร์ทุกเครื่อง ส่งอีเมลหรือวางไว้ในไดรฟ์ที่แชร์กันได้เลย

อยากได้ตาราง HTML สวย ๆ โดยไม่ต้องเขียน CSS เอง

เลือกแบบหน้าเว็บทั้งหน้า จะได้แถวสลับสี หัวตารางที่ค้างอยู่ด้านบนตอนเลื่อนดูตารางยาว ๆ คอลัมน์ตัวเลขชิดขวาให้หลักตรงกัน ฟอนต์ที่แสดงภาษาไทยได้สวย ตารางเลื่อนซ้ายขวาได้บนมือถือแทนที่จะถูกบีบ และมีโหมดมืดให้คนที่ใช้ธีมมืด สไตล์ทั้งหมดอยู่ในบล็อกสไตล์บล็อกเดียวด้านบนของไฟล์ คัดลอกไปใช้ในเว็บของคุณเองก็ได้

CSV ของฉันมีภาษาไทย แล้วเว็บแปลงอื่นแสดงเป็นภาษาต่างดาว

ไฟล์ CSV ไม่ได้บอกว่าตัวเองเข้ารหัสแบบไหน โปรแกรมที่อ่านจึงต้องเดา เครื่องมือนี้ใช้การตรวจแทนการเดา รู้จัก UTF-8, UTF-8 ที่มี BOM (ตัวเลือก "CSV UTF-8" ของ Excel), Windows-874 (CSV ธรรมดาของ Excel บนเครื่องภาษาไทย) และ UTF-16 (ตัวเลือก "Unicode Text" ของ Excel) และบอกให้รู้ว่าพบแบบไหน ตารางที่ได้เขียนเป็น UTF-8 เสมอ และหน้าเว็บทั้งหน้าประกาศไว้ในไฟล์ จึงแสดงถูกไม่ว่าจะเปิดที่ไหน

ในเซลล์มีวงเล็บมุม เครื่องหมายพิเศษ หรือโค้ดอยู่ จะทำให้หน้าเว็บพังไหม

ไม่พัง ทุกค่าถูก escape ให้ แท็กตัวหนาที่พิมพ์ไว้ในเซลล์จึงแสดงเป็นตัวอักษรตามที่พิมพ์ ไม่ได้ทำให้ตารางที่เหลือกลายเป็นตัวหนา และเซลล์ที่มีแท็ก script ก็เป็นแค่ข้อความที่รันไม่ได้ เรื่องนี้สำคัญที่สุดเมื่อ CSV มาจากที่อื่น เช่น จากฟอร์มหรือไฟล์ export เพราะเป็นที่ที่ค่าที่ไม่มีใครตรวจมักจะมาจาก

ไฟล์ของฉันถูกอัปโหลดไหม

ไม่ เบราว์เซอร์ของคุณเป็นตัวอ่านไฟล์และสร้างตารางเอง นโยบายความปลอดภัยของเว็บกำหนด connect-src ‘none’ เบราว์เซอร์จึงบล็อกการเรียกเครือข่ายจากหน้านี้ ต่อให้โค้ดอยากส่งออกไปก็ส่งไม่ได้ เว็บส่วนใหญ่ในหน้าแรกของผลค้นหาคำนี้อัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์ และบางเว็บบอกว่าจะลบให้ภายในหนึ่งวัน

รับไฟล์ใหญ่ได้แค่ไหน

ได้ทุกขนาด ระบบอ่านไฟล์ทีละส่วนและเขียนตารางทีละส่วน ไฟล์ที่ใหญ่กว่าหน่วยความจำของเครื่องก็ทำได้ บนหน้าจอแสดงผลลัพธ์ 200 KB แรกเพื่อให้หน้ายังลื่น ไฟล์ที่ดาวน์โหลดมีครบทั้งหมด ปุ่มคัดลอกใช้ได้กับผลลัพธ์ไม่เกิน 8 MB เพราะคลิปบอร์ดไม่ได้มีไว้เก็บทั้งไฟล์

ที่จริงอยากแปลง CSV เป็นตารางใน Excel ไม่ใช่บนหน้าเว็บ

นั่นเป็นงานอีกแบบ และเว็บนี้มีหน้าสำหรับงานนั้นแล้ว คือแปลง CSV เป็น Excel ซึ่งเขียนไฟล์ .xlsx จริง เบอร์โทรยังมีศูนย์นำหน้า และเลขบัตรประชาชน 13 หลักไม่กลายเป็น 1.2E+12