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

คุณสมบัติ caption-side กำหนด ตำแหน่งของหัวเรื่องตารางที่สร้างขึ้นด้วยแท็ก <caption> คุณสมบัตินี้ สามารถมีค่าได้สองค่า: top (ด้านบนของตาราง, ค่าเริ่มต้น) หรือ bottom (ใต้ตาราง)

ไวยากรณ์

cssตัวเลือก {
  caption-side: top | bottom;
}

ตัวอย่าง

ลองวางหัวเรื่องไว้ด้านบนของตาราง:

html<table border="1" width="300">
  <caption>ตาราง</caption>
  <tr>
    <th>หัวเรื่อง</th>
    <th>คำอธิบาย</th>
  </tr>
  <tr>
    <td>ข้อความ1</td>
    <td>ข้อความ2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

ตัวอย่าง

และตอนนี้ลองย้ายหัวเรื่องไว้ ใต้ตาราง:

html<table border="1" width="300">
  <caption>ตาราง</caption>
  <tr>
    <th>หัวเรื่อง</th>
    <th>คำอธิบาย</th>
  </tr>
  <tr>
    <td>ข้อความ1</td>
    <td>ข้อความ2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

ดูเพิ่มเติม