แท็ก <caption> ใน HTML

แท็ก <caption> ใน HTML

แท็ก <caption> ใน HTML ใช้สำหรับสร้างคำอธิบาย (caption) สำหรับตาราง สามารถกำหนด caption ได้เพียงหนึ่งอันต่อตารางหนึ่ง ตำแหน่งเริ่มต้นของ caption จะอยู่ตรงกลางด้านบนของตาราง

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <table>
    <caption>ค่าใช้จ่าย</caption>
    <tr>
      <th>โดเมน</th>
      <th>ค่าใช้จ่าย</th>
    </tr>
    <tr>
      <td>พัฒนาผลิตภัณฑ์</td>
      <td>500000</td>
    </tr>
    <tr>
      <td>การตลาด</td>
      <td>500000</td>
    </tr>
    <tr>
      <td>บริการ</td>
      <td>100000</td>
    </tr>
    <tr>
      <td>สนับสนุน</td>
      <td>100000</td>
    </tr>
    <tr>
      <td>บำรุงรักษา</td>
      <td>100000</td>
    </tr>
    <tr>
      <td colspan="2">งบประมาณรวม = 1,300,000 บาท</td>
    </tr>
  </table>
</body>
</html>

ผลลัพธ์

ในตัวอย่างข้างต้น เราได้สร้างตารางพร้อมคอลัมน์ และกำหนด caption โดยใช้แท็ก <caption>:

<caption>ค่าใช้จ่าย</caption>