ตารางซับซ้อน: การจับคู่ headers และ id

ตารางบางชนิดครอบคลุมหลายเซลล์หรือซ้อนหัวตารางหลายระดับ scope แบบง่ายไม่สามารถอธิบายเซลล์ที่อยู่ภายใต้หัวตารางสองหรือสามหัวพร้อมกันได้

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

สำหรับตารางที่ซับซ้อน ให้ th แต่ละรายการมี id แล้วชี้ td แต่ละรายการไปยัง headers ด้วย id วิธีนี้เชื่อมเซลล์กับหัวตารางอย่างชัดเจนโดยไม่ต้องเดา

เซลล์ข้อมูลสามารถระบุหัวตารางหลายรายการในแอตทริบิวต์ headers โดยคั่นด้วยช่องว่าง โปรแกรมอ่านหน้าจอจะประกาศทั้งหมดตามลำดับที่คุณระบุ

กำหนด id ให้หัวแถวและหัวคอลัมน์อย่างละรายการ แล้วอ้างอิงทั้งสองจากเซลล์ ตอนนี้ค่าข้อมูลได้รับการ อธิบายครบถ้วนตามทั้งสองแกน

สำหรับหัวตารางแบบกลุ่ม scope สามารถเป็น colgroup หรือ rowgroup ใช้ค่าเหล่านี้เมื่อหัวตารางหนึ่งรายการครอบคลุมกลุ่มคอลัมน์หรือแถวเหนือหัวตารางรายละเอียด

หัวตารางปีที่อยู่เหนือหัวตารางเดือนต้องอธิบายทั้งสองระดับ ด้วย id และ headers แต่ละเซลล์สามารถอ้างอิงทั้งปีและเดือนร่วมกันได้

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

ระบุ id ตามลำดับที่ต้องการให้มีการอ่าน โดยปกติให้หัวตารางที่ครอบคลุมกว้างที่สุดอยู่ก่อน โปรแกรมอ่านหน้าจอจะทำตาม ลำดับของคุณอย่างแม่นยำเมื่อประกาศ

ก่อนเลือกใช้ id และ headers ให้ถามตัวเองว่าสามารถแบ่งตารางขนาดใหญ่มากออกเป็นตารางเล็ก ๆ ที่เรียบง่ายกว่าได้หรือไม่ โครงสร้างที่ ง่ายกว่ามักเข้าถึงได้ดีกว่าเสมอ

เทคนิค id และ headers มีประสิทธิภาพมาก แต่พิมพ์ผิดได้ง่าย ควรตรวจสอบให้แน่ใจว่าเซลล์บางส่วนอ่านได้ถูกต้องด้วย โปรแกรมอ่านหน้าจอจริง ไม่ใช่ดูด้วยตาเพียงอย่างเดียว

เมื่อการครอบคลุมหลายเซลล์หรือระดับหัวข้อที่ซ้อนกันทำให้ scope ใช้ไม่ได้ ให้กำหนด id ให้หัวข้อ แล้วอ้างอิงจากแต่ละเซลล์ด้วย headers โดยให้ id ไม่ซ้ำกันและตรวจสอบด้วยการฟัง