Softonic

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

ขั้นตอน 1 / 2
แปลงเป็นตาราง HTML

การใส่ตารางข้อมูลลงในโพสต์บล็อก วิกีภายในองค์กร หรือจดหมายข่าวทางอีเมล มักจะทำให้เกิดปัญหาเมื่อใช้งานเครื่องมือแก้ไขตารางของระบบจัดการเนื้อหา (CMS) ควรใช้วิธีติดแทรกไฟล์ CSV แทน โดยแถวแรกจะถูกแปลงเป็นเซลล์ <th> แถวถัดไปจะกลายเป็น <td> และทั้งชุดข้อมูลจะถูกล้อมรอบด้วยองค์ประกอบ <table> แบบพื้นฐานโดยไม่มีสไตล์ฝัง (inline styles) การแสดงผลนี้เรียบง่าย และสามารถรองรับสไตล์ CSS ที่เว็บไซต์ของคุณกำหนดได้ทั้งหมด

กระบวนการแปลงข้อมูลดำเนินไปอย่างไร

  1. 1

    วางไฟล์ CSV เข้าไป

    การขึ้นบรรทัดใหม่จะใช้แบ่งแถว; `str_getcsv` จะวิเคราะห์แต่ละบรรทัด เพื่อจัดการกับเครื่องหมายจุลภาคที่อยู่ในเครื่องหมายคำพูดและเครื่องหมายคำพูดแบบหลีกได้อย่างถูกต้อง

  2. 2

    สลับโหมดหัวข้อ

    เมื่อเปิดใช้งาน แถวแรกจะแสดงข้อมูลในรูปแบบเซลล์ `<th>` ส่วนเมื่อปิดใช้งาน ทุกแถวจะแสดงข้อมูลในรูปแบบ `<td>`

  3. 3

    ค่าต่างๆ จะถูกหลีก (escape) แบบ HTML

    ตัวแปลงจะเรียกฟังก์ชันช่วยเหลือ e() ของ Laravel ดังนั้น `<`, `>` และ `&` จึงถูกหลีกอย่างปลอดภัยในผลลัพธ์

  4. 4

    คัดลอกการแทรกข้อมูล

    โค้ด HTML ถูกแทรกอินเดนต์สองช่องว่างเพื่อความสะดวกในการอ่าน สามารถนำไปใช้ได้โดยตรงในไฟล์ Blade, โพสต์แบบ Markdown หรือหน้าแสดงผลแบบ WYSIWYG

การออกแบบรูปลักษณ์และการเข้าถึงผลลัพธ์

ตัวแปลงข้อมูลจะสร้างไฟล์ HTML ที่มีโครงสร้างเรียบง่าย โดยไม่มีคลาส ไม่มีสไตล์แบบอินไลน์ และไม่มีรูปแบบหุ้ม (wrapper) อย่าง <thead> หรือ <tbody> ซึ่งช่วยให้ผลลัพธ์สามารถนำไปใช้งานได้ในระบบต่าง ๆ แต่คุณอาจต้องการปรับแต่งรูปลักษณ์ของไฟล์นี้เพิ่มเติม

สไตล์ชีตขั้นต่ำ

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

การปรับปรุงการเข้าถึงอย่างรวดเร็ว

  • หากคุณมีตารางที่มีจำนวนแถวมาก ให้ห่อแถวแรกด้วย <thead> เพื่อให้โปรแกรมอ่านหน้าจอประกาศคอลัมน์หัวข้อขณะผู้ใช้เลื่อนไปตามแถวต่างๆ โดยตัวแปลงจะไม่ดำเนินการนี้โดยอัตโนมัติ เพื่อให้ผลลัพธ์กระชับที่สุด
  • ให้เพิ่มองค์ประกอบ <caption> ไว้เหนือตาราง พร้อมคำอธิบายด้วยภาษาที่เข้าใจง่ายว่าข้อมูลนั้นหมายถึงอะไร
  • ใช้ scope="col" กับเซลล์ <th> หากแถวหัวอธิบายคอลัมน์ และใช้ scope="row" หากคอลัมน์แรกระบุแถว

เมื่อ HTML ไม่ใช่รูปแบบที่เหมาะสม

หากปลายทางเป็น Markdown ให้ใช้เครื่องมือแปลงข้อมูลจาก CSV เป็น Markdown แทน ส่วนกรณีที่ปลายทางเป็นฐานข้อมูล เครื่องมือแปลงข้อมูลจาก CSV เป็น SQL จะสร้างคำสั่ง INSERT ที่รันได้โดยตรง ตารางในรูปแบบ HTML เหมาะอย่างยิ่งสำหรับการแสดงผลบนหน้าเว็บ แต่ไม่เหมาะนักสำหรับงานที่ต้องค้นหาหรือเรียงลำดับข้อมูลใหม่

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

ใช่ ค่าต่างๆ จะถูกหลีกโดยใช้ฟังก์ชันช่วย e() ของ Laravel ดังนั้น < จะกลายเป็น &lt; และเนื้อหาที่ผู้ใช้ป้อนเข้ามาจะไม่สามารถแทรกแท็กสคริปต์หรือปิดตารางก่อนเวลาอันควรได้

ไม่ได้สร้างตามค่าเริ่มต้น, ผลลัพธ์จะเป็น <table> เพียงตัวเดียว โดยมี <tr> เป็นองค์ประกอบลูกโดยตรง หาก CSS เป้าหมายของคุณจำเป็นต้องใช้ ให้ห่อ <tr> ของแถวหัวไว้ภายใน <thead> และห่อส่วนที่เหลือไว้ภายใน <tbody>

เซลล์ที่มีบรรทัดใหม่ฝังอยู่จะถูกแสดงตามสภาพเดิม หากต้องการให้บรรทัดใหม่ปรากฏในเบราว์เซอร์ ให้แทนที่ด้วย <br> ก่อนการแปลง หรือตั้งค่า white-space: pre-wrap; ในไฟล์ CSS ของ <td>

ใช่ ไฟล์ CSV จะถูกส่งไปยังเซิร์ฟเวอร์ของเราเพื่อให้ตัวแปลงสามารถสร้างตารางได้ ไฟล์จะไม่ถูกจัดเก็บและไม่ถูกเพิ่มลงในลิงก์ของหน้าเว็บ

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

เครื่องมือระบุนามสกุลไฟล์

ค้นหาว่านามสกุลหรือชื่อไฟล์ตรงกับไฟล์ประเภทใดและ MIME ประเภทใด พร้อมตารางอ้างอิงรูปแบบไฟล์ทั่วไปและเคล็ดลับสังเกตนามสกุลซ้อน

ตัวแปลง MP4 เป็น MP3

ดึงแทร็กเสียงออกจากวิดีโอ MP4 แล้วบันทึกเป็น MP3 เหมาะสำหรับมิวสิกวิดีโอ พอดแคสต์ การบรรยาย และคลิปเสียงที่คุณต้องการฟังได้ทุกที่

ตัวตรวจจับชื่อไฟล์ซ้ำ

วางรายการชื่อไฟล์แล้วดูว่าชื่อใดปรากฏมากกว่าหนึ่งครั้ง พร้อมจำนวนครั้งและตัวเลือกไม่คำนึงถึงตัวพิมพ์ใหญ่เล็ก

ตัวแปลง MOBI เป็น EPUB

แปลง ebook MOBI เป็น EPUB ซึ่งเป็นมาตรฐานเปิดที่ Apple Books, Kobo, Google Play Books และแอปสมัยใหม่ส่วนใหญ่อ่านได้ อัปโหลดไฟล์ .mobi แล้วดาวน์โหลด .epub ที่สะอาด

โปรแกรมสำหรับลบคอลัมน์ในตารางข้อมูล (CSV)

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

ตัวสร้างข้อมูลทดสอบ SQL

สร้างคำสั่ง SQL INSERT ที่พร้อมรันพร้อมแถวตัวอย่างแบบเรียงลำดับ (id, name, email, active) สำหรับชื่อตารางใดก็ได้ สูงสุด 200 แถว ไวยากรณ์ MySQL เพียงคลิกเดียว

เครื่องมือนี้มีให้บริการในภาษาอื่น