Thuộc tính HTML DOM captionSide được sử dụng để lấy hoặc đặt vị trí chú thích bảng. Chú thích bảng chỉ được đặt ở vị trí dọc, tức là trên cùng và dưới cùng.
Sau đây là cú pháp cho -
Đặt thuộc tính captionSide -
object.style.captionSide = "top|bottom|initial|inherit"
Các thuộc tính trên được giải thích như sau:
| Giá trị | Mô tả |
|---|---|
| top | Để định vị chú thích bảng phía trên bảng. Đây là giá trị mặc định. |
| dưới cùng | Để định vị chú thích bảng bên dưới bảng. |
| tên đầu tiên | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính captionSide -
Ví dụ
<!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> Đầu ra
Khi nhấp vào “ Thay đổi vị trí phụ đề Nút ”
