th, scope และองค์ประกอบ caption
ตั้งชื่อให้ตารางและกำหนดเซลล์หัวตารางอย่างถูกต้อง
th, scope และองค์ประกอบ caption เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
ตารางข้อมูลมีความหมาย
ตารางข้อมูลจริงแสดงความสัมพันธ์ระหว่างแถวและคอลัมน์ หากกำหนดโครงสร้างอย่างถูกต้อง โปรแกรมอ่านหน้าจอจะประกาศได้ว่าแต่ละค่าเป็นของหัวตารางใด
ตารางธรรมดาทำให้สับสน
หากทุกเซลล์เป็นเพียง td โปรแกรมอ่านหน้าจอจะอ่านตัวเลขโดยไม่มีบริบท ผู้ใช้ได้ยินค่าแต่ไม่เคยรู้ว่าค่านั้นหมายถึงอะไร
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>เซลล์หัวตารางใช้ th
เปลี่ยนเซลล์หัวตารางจาก td เป็น th ตอนนี้เบราว์เซอร์ทราบว่าเซลล์เหล่านั้นใช้กำกับข้อมูล ไม่ใช่เก็บข้อมูล และจะแสดงเป็นหัวตาราง
<tr><th>Name</th><th>Score</th></tr>เหตุใด th จึงเปลี่ยนทุกอย่าง
องค์ประกอบ th จะถูกประกาศว่าเป็นหัวตารางและเชื่อมโยงกับเซลล์ที่อธิบายได้ ลิงก์นี้เองที่ทำให้ตัวเลขที่ดูโดดเดี่ยวมีความหมาย
แอตทริบิวต์ scope
เพิ่ม scope ให้ th แต่ละรายการเพื่อระบุว่าครอบคลุมเซลล์ใด ค่า col ใช้กับหัวคอลัมน์ และ row ใช้กับหัวแถว
<th scope="col">Score</th>scope=col สำหรับหัวตารางด้านบน
ใช้ scope=col กับหัวตารางด้านบนของคอลัมน์ ทุกเซลล์ด้านล่างจะสืบทอดป้ายกำกับนั้นเมื่อผู้ใช้เลื่อนลงมา
<th scope="col">City</th>scope=row สำหรับหัวตารางด้านข้าง
ใช้ scope=row กับเซลล์แรกของแถวเมื่อเซลล์นั้นระบุชื่อแถว เช่น บุคคลหรือวันที่ที่อยู่ริมซ้าย
<th scope="row">Ada</th>caption ตั้งชื่อให้ตาราง
องค์ประกอบ caption ให้ชื่อแก่ทั้งตาราง ผู้ใช้โปรแกรมอ่านหน้าจอจะได้ยินชื่อนี้ก่อน จึงทราบว่ากำลังจะสำรวจอะไร
<table>
<caption>Quiz scores by student</caption>
</table>caption ต้องอยู่ก่อน
วาง caption เป็นองค์ประกอบลูกตัวแรกสุดภายในตาราง ทันทีหลังแท็กเปิด ตำแหน่งอื่นไม่ถูกต้องและอาจถูกละเลย
caption ดีกว่าหัวข้อ
h2 ที่อยู่ใกล้ ๆ ยังไม่เพียงพอ caption เชื่อมโยงกับตารางในเชิงโปรแกรม ผู้ใช้จึงค้นพบชื่อเรื่องได้แม้จะข้ามจากตารางหนึ่งไปอีกตารางหนึ่ง
ตารางอย่างง่ายที่สมบูรณ์
มี caption แถวหัวตารางที่ใช้ th พร้อม scope แล้วจึงตามด้วยแถวข้อมูล พื้นฐานนี้ทำให้ตารางอย่างง่ายส่วนใหญ่เข้าถึงได้อย่างสมบูรณ์โดยไม่ต้องใช้ ARIA
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>ตรวจสอบอย่างรวดเร็ว
คุณกำลังกำหนดป้ายกำกับให้หัวคอลัมน์ด้านบนของตาราง
สรุป: องค์ประกอบพื้นฐานสามอย่าง
คุณได้เรียนรู้สามองค์ประกอบของตารางที่เข้าถึงได้ ได้แก่ th สำหรับหัวตาราง scope สำหรับกำหนดทิศทาง และ caption สำหรับตั้งชื่อตาราง เท่านี้ก็ทำงานส่วนใหญ่เสร็จแล้ว
คำถามที่พบบ่อย
บทเรียน “th, scope และองค์ประกอบ caption” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “th, scope และองค์ประกอบ caption” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “th, scope และองค์ประกอบ caption”
ตั้งชื่อให้ตารางและกำหนดเซลล์หัวตารางอย่างถูกต้อง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “th, scope และองค์ประกอบ caption” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- th, scope และองค์ประกอบ caption
- หัวแถวและหัวคอลัมน์ที่กำหนดอย่างถูกต้อง
- ตารางซับซ้อน: การจับคู่ headers และ id
- ตารางจัดวางคือกับดัก