แปลงจาก CSV เป็นตาราง HTML
การใส่ตารางข้อมูลลงในโพสต์บล็อก วิกีภายในองค์กร หรือจดหมายข่าวทางอีเมล มักจะทำให้เกิดปัญหาเมื่อใช้งานเครื่องมือแก้ไขตารางของระบบจัดการเนื้อหา (CMS) ควรใช้วิธีติดแทรกไฟล์ CSV แทน โดยแถวแรกจะถูกแปลงเป็นเซลล์ <th> แถวถัดไปจะกลายเป็น <td> และทั้งชุดข้อมูลจะถูกล้อมรอบด้วยองค์ประกอบ <table> แบบพื้นฐานโดยไม่มีสไตล์ฝัง (inline styles) การแสดงผลนี้เรียบง่าย และสามารถรองรับสไตล์ CSS ที่เว็บไซต์ของคุณกำหนดได้ทั้งหมด
กระบวนการแปลงข้อมูลดำเนินไปอย่างไร
-
1
วางไฟล์ CSV เข้าไป
การขึ้นบรรทัดใหม่จะใช้แบ่งแถว; `str_getcsv` จะวิเคราะห์แต่ละบรรทัด เพื่อจัดการกับเครื่องหมายจุลภาคที่อยู่ในเครื่องหมายคำพูดและเครื่องหมายคำพูดแบบหลีกได้อย่างถูกต้อง
-
2
สลับโหมดหัวข้อ
เมื่อเปิดใช้งาน แถวแรกจะแสดงข้อมูลในรูปแบบเซลล์ `<th>` ส่วนเมื่อปิดใช้งาน ทุกแถวจะแสดงข้อมูลในรูปแบบ `<td>`
-
3
ค่าต่างๆ จะถูกหลีก (escape) แบบ HTML
ตัวแปลงจะเรียกฟังก์ชันช่วยเหลือ e() ของ Laravel ดังนั้น `<`, `>` และ `&` จึงถูกหลีกอย่างปลอดภัยในผลลัพธ์
-
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 ดังนั้น < จะกลายเป็น < และเนื้อหาที่ผู้ใช้ป้อนเข้ามาจะไม่สามารถแทรกแท็กสคริปต์หรือปิดตารางก่อนเวลาอันควรได้
ไม่ได้สร้างตามค่าเริ่มต้น, ผลลัพธ์จะเป็น <table> เพียงตัวเดียว โดยมี <tr> เป็นองค์ประกอบลูกโดยตรง หาก CSS เป้าหมายของคุณจำเป็นต้องใช้ ให้ห่อ <tr> ของแถวหัวไว้ภายใน <thead> และห่อส่วนที่เหลือไว้ภายใน <tbody>
เซลล์ที่มีบรรทัดใหม่ฝังอยู่จะถูกแสดงตามสภาพเดิม หากต้องการให้บรรทัดใหม่ปรากฏในเบราว์เซอร์ ให้แทนที่ด้วย <br> ก่อนการแปลง หรือตั้งค่า white-space: pre-wrap; ในไฟล์ CSS ของ <td>
ใช่ ไฟล์ CSV จะถูกส่งไปยังเซิร์ฟเวอร์ของเราเพื่อให้ตัวแปลงสามารถสร้างตารางได้ ไฟล์จะไม่ถูกจัดเก็บและไม่ถูกเพิ่มลงในลิงก์ของหน้าเว็บ
เครื่องมือที่เกี่ยวข้อง
เครื่องมือแตกไฟล์บีบอัด
ตรวจสอบไฟล์ ZIP, JAR, XPI, DOCX, XLSX, PPTX และ ODT ภายในเบราว์เซอร์ แล้วดาวน์โหลดไฟล์ด้านในทีละไฟล์โดยไม่ต้องอัปโหลดไฟล์ต้นฉบับ
ตัวแปลงคำบรรยาย
แปลงคำบรรยาย SRT เป็น WebVTT หรือ VTT เป็น SRT ภายในเครื่อง ตรวจสอบเวลา รักษาข้อความหลายบรรทัด แล้วคัดลอกหรือดาวน์โหลดผลลัพธ์
เครื่องมือแยกชีต Excel
แยกเวิร์กบุ๊ก XLSX หรือ XLS ตามแท็บเวิร์กชีต กลุ่มแถวข้อมูล หรือค่าคอลัมน์ในเบราว์เซอร์ ดาวน์โหลด XLSX เดียวหรือ ZIP ในเครื่องได้โดยไม่ต้องอัปโหลดไฟล์
รวมแผ่นงาน Excel
รวมไฟล์ XLSX, XLS, XLSM, XLSB หรือ ODS ในเครื่อง เก็บแผ่นงานต้นทางแยกไว้ หรือเพิ่มแถวที่มีหัวคอลัมน์ตรงกัน แล้วดาวน์โหลด XLSX.
เครื่องมือแปลง Excel เป็น CSV
แปลงชีต XLSX หรือ XLS เป็น CSV หรือ TSV ในเบราว์เซอร์ เลือกชีต ตัวคั่น การเข้ารหัส และข้อมูลที่ซ่อนได้โดยไม่ต้องอัปโหลดไฟล์
เครื่องมือแปลง Word เป็น Markdown
แปลงไฟล์ Word DOCX เป็น Markdown ที่เป็นระเบียบภายในเบราว์เซอร์ เก็บหัวข้อ รายการ ลิงก์ และตารางแบบง่าย แล้วคัดลอกหรือดาวน์โหลดไฟล์ .md ที่แก้ไขได้