คุณสมบัติ HTML DOM captionSide ใช้สำหรับรับหรือตั้งค่าตำแหน่งคำอธิบายตาราง คำอธิบายตารางถูกกำหนดไว้ที่ตำแหน่งแนวตั้งเท่านั้น เช่น บนและล่าง
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติด้านคำอธิบายภาพ -
object.style.captionSide = "top|bottom|initial|inherit"
คุณสมบัติข้างต้นมีคำอธิบายดังนี้:
| ค่า | คำอธิบาย |
|---|---|
| บน | สำหรับการวางตำแหน่งคำอธิบายตารางเหนือตาราง นี่คือค่าเริ่มต้น |
| ล่าง | สำหรับการวางตำแหน่งคำอธิบายตารางด้านล่างตาราง |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เรามาดูตัวอย่างคุณสมบัติ CaptionSide กัน −
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#t1{
caption-side: bottom;
border: 2px dashed black;
}
td {
border: 2px solid blue;
}
caption {
font-size: 24px;
font-weight: bold;
}
</style>
<script>
function changeCaptionPosition(){
document.getElementById("t1").style.captionSide="top";
document.getElementById("Sample").innerHTML="The caption side is now changed to top ";
}
</script>
</head>
<body>
<table id="t1">
<caption>Demo Caption</caption>
<tr>
<th>demo head</th>
<th>demo head</th>
</tr>
<tr>
<td>there goes my data..</td>
<td>there goes my..</td>
</tr>
<tr>
<td>there goes my data..</td>
<td>there goes my..</td>
</tr>
</table>
<p>Change the above table caption position by clicking the below button</p>
<button onclick="changeCaptionPosition()">Change Caption Position</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยนตำแหน่งคำบรรยาย ” ปุ่ม
