ควบคุมตำแหน่ง caption ตารางด้วย CSS (caption-side)

คุณสมบัติ caption-side

คุณสมบัติ CSS caption-side ใช้ควบคุมการวางตำแหน่งของ caption ตาราง

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อนำ caption-side ไปใช้:

<html>
  <head>
    <style>
      caption.top {
        caption-side: top;
      }
      caption.bottom {
        caption-side: bottom;
      }
    </style>
  </head>
  <body>
    <table style="width:500px; border:3px solid gray;">
      <caption class="top">Countries (Top Caption)</caption>
      <tr><td>India</td></tr>
      <tr><td>UK</td></tr>
      <tr><td>US</td></tr>
      <tr><td>Australia</td></tr>
    </table>
    <br />
    <table style="width:500px; border:3px solid blue;">
      <caption class="bottom">Countries (Bottom caption)</caption>
      <tr><td>India</td></tr>
      <tr><td>UK</td></tr>
      <tr><td>US</td></tr>
      <tr><td>Australia</td></tr>
    </table>
    <br />
  </body>
</html>

ค่าที่ใช้ได้:

• top - Caption อยู่ด้านบนตาราง (ค่าเริ่มต้น)
• bottom - Caption อยู่ด้านล่างตาราง
• left/right - ไม่รองรับในเบราว์เซอร์ส่วนใหญ่ (ล้าสมัย)