พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน caption Tag

ใน HTML5 แท็ก <caption> ใช้สำหรับระบุคำอธิบายหรือตั้งชื่อให้กับตาราง (table) โดยต้องเป็นลูกของแท็ก <table> เท่านั้น คำอธิบายที่อยู่ในแท็ก <caption> มักจะถูกแสดงอยู่ด้านบนของตาราง แต่ตำแหน่งสามารถเปลี่ยนได้ตามการจัดรูปแบบโดย CSS

รูปแบบการใช้งานแท็ก <caption>

HTML
<table>
  <caption>ตารางการขายสินค้าในเดือนกันยายน</caption>
  <tr>
    <th>สินค้า</th>
    <th>จำนวน</th>
    <th>ราคา</th>
  </tr>
  <tr>
    <td>เสื้อ</td>
    <td>100</td>
    <td>500</td>
  </tr>
  <tr>
    <td>กางเกง</td>
    <td>50</td>
    <td>700</td>
  </tr>
</table>
  • ในตัวอย่างข้างต้น <caption> จะทำหน้าที่ระบุคำอธิบายว่า ตารางนี้แสดงข้อมูล “ตารางการขายสินค้าในเดือนกันยายน” ซึ่งจะถูกแสดงอยู่ด้านบนของตาราง
  • แท็กนี้มีความสำคัญในการเพิ่มความชัดเจนและเป็นมิตรต่อการเข้าถึง (accessibility) โดยเฉพาะกับผู้ใช้อุปกรณ์อ่านหน้าจอ (screen readers)

การปรับแต่งตำแหน่งของ <caption>

โดยค่าเริ่มต้น คำอธิบายจะอยู่ด้านบนของตาราง แต่เราสามารถเปลี่ยนตำแหน่งด้วย CSS ได้ เช่น การแสดงที่ด้านล่างของตาราง

HTML
<style>
  caption {
    caption-side: bottom; /* แสดงคำอธิบายที่ด้านล่าง */
    font-weight: bold;
    color: #2c3e50;
  }
</style>

<table>
  <caption>รายงานผลการสำรวจ</caption>
  <tr>
    <th>รายการ</th>
    <th>จำนวนผู้เข้าร่วม</th>
  </tr>
  <tr>
    <td>งานนิทรรศการ</td>
    <td>200</td>
  </tr>
  <tr>
    <td>การสัมมนา</td>
    <td>150</td>
  </tr>
</table>

ตัวเลือกเพิ่มเติมที่สามารถประยุกต์ใช้งานได้

  • CSS การจัดรูปแบบ: สามารถปรับขนาดตัวอักษร สี หรือขีดเส้นใต้ได้ตามที่ต้องการ โดยการใช้ CSS
  • การจัดรูปแบบภายใน <caption>: สามารถเพิ่มแท็ก HTML อื่นๆ ภายใน <caption> เพื่อจัดรูปแบบเพิ่มเติม เช่น <strong>, <em>, หรือ <span>
HTML
<table>
  <caption><strong>ผลลัพธ์การโหวต</strong> <em>(ข้อมูลล่าสุด)</em></caption>
  <tr>
    <th>ตัวเลือก</th>
    <th>จำนวนโหวต</th>
  </tr>
  <tr>
    <td>ตัวเลือก A</td>
    <td>300</td>
  </tr>
  <tr>
    <td>ตัวเลือก B</td>
    <td>200</td>
  </tr>
</table>

สรุป

การใช้ <caption> ใน HTML5 ช่วยให้เราสามารถเพิ่มคำอธิบายที่ชัดเจนให้กับตาราง ช่วยในเรื่องการเข้าถึง และยังสามารถปรับแต่งตำแหน่งและรูปแบบด้วย CSS เพื่อให้ตรงตามความต้องการ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ