วิธีสร้างตารางพร้อมคำอธิบาย (Caption) ใน HTML

แท็ก <caption> ใช้สำหรับเพิ่มหัวข้อ/คำอธิบายให้ตาราง ต้องวางทันทีหลังแท็ก <table> เปิดตัว

คุณสมบัติ

• ต้องเป็น child element แรกของ <table>
• มีได้เพียง 1 ต่อ 1 ตาราง
• Browser จะแสดงอยู่เหนือตาราง จัดกึ่งกลางโดยค่าเริ่มต้น
• ช่วย accessibility (screen reader จะอ่าน caption ก่อน)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    table, td, th { border: 1px solid black; }
  </style>
</head>
<body>
  <table>
    <caption>Our Technologies</caption>
    <tr>
      <th>IDE</th>
      <th>Database</th>
    </tr>
    <tr>
      <td>NetBeans IDE</td>
      <td>MySQL</td>
    </tr>
  </table>
</body>
</html>

การจัดสไตล์ Caption

caption {
  caption-side: top; /* หรือ bottom */
  text-align: left;  /* จัดชิดซ้าย */
  font-weight: bold;
  padding: 10px;
  font-size: 1.2em;
}

แนวทางปฏิบัติที่ดี

ควรมี caption ในทุกตารางที่มีข้อมูลสำคัญ เพื่อความเข้าใจง่ายและรองรับ accessibility