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 จะถูกส่งไปยังเซิร์ฟเวอร์ของเราเพื่อให้ตัวแปลงสามารถสร้างตารางได้ ไฟล์จะไม่ถูกจัดเก็บและไม่ถูกเพิ่มลงในลิงก์ของหน้าเว็บ

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

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

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

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

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

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

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

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

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

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

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

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

แปลงเสียง M4A เป็น MP3 เพื่อรองรับการเล่นที่กว้างขึ้น อัปโหลดไฟล์ .m4a แล้วดาวน์โหลดสำเนา .mp3 ที่ใช้งานร่วมกันได้

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