เครื่องมือสร้างตาราง HTML

อะไรที่ทำให้ตาราง HTML ดี

ตาราง HTML มีไว้เพื่อนำเสนอข้อมูลที่เป็นตารางอย่างแท้จริง คือ แถวและคอลัมน์ที่ตำแหน่งของค่ามีความหมาย เช่น เมทริกซ์ราคา ตารางเวลา หรือแผนภูมิเปรียบเทียบ ตารางที่ถูกต้องเป็นมากกว่าตารางกริดของเซลล์ มันถูกสร้างขึ้นจากกลุ่ม element เล็ก ๆ ที่อธิบายบทบาท คือ table ห่อทุกอย่างไว้ thead และ tbody แยกส่วนหัวออกจากเนื้อหา th ระบุเซลล์ส่วนหัว และ td บรรจุเซลล์ข้อมูล เครื่องมือนี้สร้างโครงสร้างเต็มรูปแบบนั้นให้คุณ เพื่อให้ผลลัพธ์สะอาดและเป็นไปตามมาตรฐาน

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

สองวิธีในการนำข้อมูลของคุณเข้ามา

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

ตัวนำเข้ามีความยืดหยุ่นเรื่องตัวคั่น มันรับข้อความที่คั่นด้วย comma, tab, semicolon และ pipe ดังนั้นการคัดลอกตรงจาก Excel หรือ Google Sheets (ซึ่งใช้ tab) และไฟล์ CSV ที่ดาวน์โหลดมา (ซึ่งใช้ comma) จึงใช้งานได้ทั้งคู่ ทำเครื่องหมาย First row is header เมื่อบรรทัดบนสุดของคุณมีชื่อคอลัมน์ แล้วค่าเหล่านั้นจะกลายเป็นเซลล์ th ใน thead แทนที่จะเป็นข้อมูลธรรมดา

ตัวอย่างประกอบ

วางสามบรรทัดลงใน CSV Import โดยทำเครื่องหมายให้บรรทัดแรกเป็นส่วนหัว คือ Name, Email, Phone ในบรรทัดที่หนึ่ง ตามด้วยรายชื่อผู้ติดต่อสองแถว เครื่องมือจะสร้างตารางที่ thead บรรจุแถวเดียวของเซลล์ th สามตัว และ tbody บรรจุแถว tr สองแถวของเซลล์ td เปิดใช้ Bordered และ Striped Rows แล้วมาร์กอัปจะได้รับ class และสไตล์ที่วาดเส้นขอบของเซลล์และสลับสีพื้นหลังของแถว เพื่อให้ตัวอย่างแสดงผลตรงกับสิ่งที่จะปรากฏบนหน้าของคุณเป๊ะ ๆ ก่อนที่คุณจะคัดลอกโค้ดเสียอีก

ตัวเลือกการจัดสไตล์ด้านภาพ

Basic Options ครอบคลุมการจัดสไตล์ที่คุณหยิบมาใช้บ่อยที่สุด Bordered วาดเส้นรอบ ๆ เซลล์ Striped Rows ลงสีแถวสลับกันเพื่อให้ตารางที่ยาว ๆ กวาดสายตาดูได้ง่ายขึ้น และ Hover Effect เน้นแถวที่อยู่ใต้เคอร์เซอร์ ซึ่งช่วยให้ผู้อ่านติดตามไปตามแถวที่กว้าง ๆ ได้ ตัวเลือกแต่ละอย่างจะสะท้อนแบบเรียลไทม์ในตัวอย่าง

สำหรับการควบคุมที่ละเอียดขึ้น Advanced Options เปิดเผยระยะ padding และ spacing ของเซลล์ ความกว้างและสีของเส้นขอบ และโหมด border-collapse ซึ่งกำหนดว่าเส้นขอบของเซลล์ที่อยู่ติดกันจะรวมเป็นเส้นเดียว (collapse) หรือคงเป็นเส้นคู่แยกกัน (separate) คุณยังสามารถแนบ ID และ class แบบกำหนดเองได้ เพื่อให้ตารางเชื่อมเข้ากับสไตล์ชีทที่มีอยู่ของคุณ แทนที่จะพึ่งพาสไตล์แบบอินไลน์เพียงอย่างเดียว

Caption และ header scope สำหรับการช่วยการเข้าถึง

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

ตัวเลือก Header Scope คือการตั้งค่าด้านการช่วยการเข้าถึงที่สำคัญที่สุดเพียงข้อเดียวที่นี่ การตั้ง scope เป็น col บนเซลล์ส่วนหัวจะบอกเทคโนโลยีสิ่งอำนวยความสะดวกว่าแต่ละ th กำกับคอลัมน์ที่อยู่ด้านล่างมัน การตั้งเป็น row จะกำกับแถวที่อยู่ข้าง ๆ มัน และตัวเลือกแบบรวมจะรองรับตารางที่มีทั้งแถวส่วนหัวและคอลัมน์ส่วนหัว เมื่อตั้ง scope อย่างถูกต้อง โปรแกรมอ่านหน้าจอจะสามารถประกาศส่วนหัวที่เกี่ยวข้องได้ในขณะที่ผู้ใช้เลื่อนจากเซลล์หนึ่งไปยังอีกเซลล์หนึ่ง ดังนั้นค่าหนึ่งจึงถูกอ่านเป็น Phone: 555-1234 แทนที่จะเป็นตัวเลขโดด ๆ ที่ไร้บริบท

ข้อควรระวังเรื่องการตอบสนอง

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

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

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง

การใช้ผิดที่พบบ่อยที่สุดคือการหยิบตารางมาใช้ควบคุมเลย์เอาต์ของหน้าแทนที่จะใช้นำเสนอข้อมูล CSS สมัยใหม่อย่าง flexbox และ grid คือเครื่องมือที่ถูกต้องสำหรับการจัดเลย์เอาต์ และตารางควรถูกสงวนไว้สำหรับเนื้อหาที่เป็นตาราง ข้อผิดพลาดทั่วไปอีกอย่างคือการละเว้นเซลล์ส่วนหัวไปทั้งหมด ซึ่งทำให้ผู้ใช้โปรแกรมอ่านหน้าจอขาดบริบทของคอลัมน์ ดังนั้นจงเลื่อนแถวแรกของคุณให้เป็นส่วนหัวเสมอเมื่อมันมีชื่อกำกับอยู่ สุดท้าย อย่าฝังการจัดสไตล์ไว้ในแอตทริบิวต์ style แบบอินไลน์ยาว ๆ ในเมื่อ class จะสะอาดกว่าและบำรุงรักษาง่ายกว่า จงใช้ฟิลด์ ID และ class เพื่อเชื่อมตารางเข้ากับสไตล์ชีท