ตารางเอชทีเอ็มแอล นำเสนอ ข้อมูลแบบตาราง (แถวและคอลัมน์ของข้อมูลที่เกี่ยวข้อง) — ไม่ใช่เลย์เอาต์ ตารางที่สามารถเข้าถึงได้ใช้โครงสร้างที่ถูกต้องเพื่อให้ screen readers สามารถประกาศส่วนหัวสำหรับแต่ละเซลล์
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> กับ scope — ทำเครื่องหมายเซลล์ส่วนหัว scope="col" สำหรับส่วนหัวคอลัมน์ scope="row" สำหรับส่วนหัวแถว Screen readers จากนั้นประกาศ "North, Revenue: $12,000" แทนที่จะอ่านเซลล์โดยไม่มีบริบท<caption> — ชื่อสำหรับตารางทั้งหมด เป็นลูกคนแรกของ <table> อ่านออกมาเพื่อให้ผู้ใช้ตัวตน<thead>/<tbody>/<tfoot> — จัดกลุ่มส่วนหัว เนื้อหา และแถวสรุป ช่วยในการนำทาง และช่วยให้ส่วนหัวซ้ำได้เมื่อพิมพ์<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
ตารางเลย์เอาต์ทำให้ screen readers สับสน (ประกาศความหมายของตาราง data) และไม่มีความยืดหยุ่น ใช้ CSS Grid/Flexbox สำหรับเลย์เอาต์หน้า
ความหมายของตารางที่ถูกต้อง (<th scope>, <caption>, การแบ่งส่วน) คือสิ่งที่ทำให้ตารางข้อมูลใช้งานได้สำหรับผู้ใช้ screen readers — พวกมันเชื่อมโยงแต่ละค่ากับส่วนหัวแถวและคอลัมน์ของมัน
จองการใช้ <table> เฉพาะสำหรับข้อมูลแบบตารางที่แท้จริง