Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính captionSide trong HTML DOM Style

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ả
topCaption ở trên bảng (mặc định)
bottomCaption ở dưới bảng
initialGiá trị mặc định
inheritKế 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).