Thuộc tính captionSide dùng để lấy hoặc thiết lập vị trí caption (tiêu đề) của bảng. Chỉ đặt được vị trí dọc: top (trên) hoặc bottom (dưới).
Cú pháp
object.style.captionSide = "top|bottom|initial|inherit"
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| top | Caption ở trên bảng (mặc định) |
| bottom | Caption ở dưới bảng |
| initial | Giá trị mặc định |
| inherit | Kế thừa từ phần tử cha |
Ví dụ minh họa
<!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 = "Vị trí caption đã thay đổi thành top";
}
</script>
</head>
<body>
<table id="t1">
<caption>Demo Caption</caption>
<tr><th>demo head</th><th>demo head</th></tr>
<tr><td>dữ liệu...</td><td>dữ liệu...</td></tr>
<tr><td>dữ liệu...</td><td>dữ liệu...</td></tr>
</table>
<p>Thay đổi vị trí caption bảng trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeCaptionPosition()">Thay đổi Caption Position</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu caption ở dưới bảng (bottom). Sau khi nhấn nút, caption chuyển lên trên bảng (top).