วิธีกำหนดว่าเซลล์ส่วนหัวเป็นหัวข้อสำหรับคอลัมน์ แถว หรือกลุ่มคอลัมน์/แถวใน HTML

ใน HTML สามารถใช้แอตทริบิวต์ scope เพื่อระบุว่าเซลล์ส่วนหัว (<th>) เป็นหัวข้อสำหรับคอลัมน์ แถว หรือกลุ่มของคอลัมน์/แถวได้ ซึ่งช่วยให้เทคโนโลยีช่วยเหลือ (screen readers) และเครื่องมืออ่านหน้าจอเข้าใจโครงสร้างตารางได้ดีขึ้น

ค่าที่ใช้ได้ของแอตทริบิวต์ scope

• col - เซลล์นี้เป็นหัวข้อสำหรับคอลัมน์
• row - เซลล์นี้เป็นหัวข้อสำหรับแถว
• colgroup - เซลล์นี้เป็นหัวข้อสำหรับกลุ่มคอลัมน์
• rowgroup - เซลล์นี้เป็นหัวข้อสำหรับกลุ่มแถว

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 1px solid black; border-collapse: collapse; }
    th, td { padding: 8px; }
  </style>
</head>
<body>
  <h2>นักคริกเก็ต</h2>
  <table style="width:100%">
    <caption>นักคริกเก็ตอินเดีย</caption>
    <tr>
      <th></th>
      <th scope="col">ชื่อ</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Sachin Tendulkar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Virat Kohli</td>
    </tr>
  </table>
</body>
</html>

ในตัวอย่างข้างต้น scope="col" บอกว่าเซลล์ "ชื่อ" เป็นหัวข้อของคอลัมน์ทั้งคอลัมน์ ทำให้ผู้ใช้เครื่องมือช่วยเหลือทราบว่าแต่ละแถวข้อมูลเชื่อมโยงกับหัวข้อนี้

ทำไม scope จึงสำคัญ?

การใช้ scope อย่างถูกต้องเป็นส่วนหนึ่งของมาตรฐานการเข้าถึงเว็บ (WCAG) ช่วยให้ตารางข้อมูลซับซ้อนอ่านง่ายขึ้นสำหรับผู้พิการทางสายตา และยังช่วยให้ SEO เข้าใจโครงสร้างข้อมูลได้ดีขึ้น