Phương thức createCaption() của đối tượng HTMLTableElement tạo một phần tử <caption> rỗng và thêm vào bảng (ở đầu bảng, trước thead). Nếu bảng đã có caption, trả về caption hiện có.
Cú pháp
var caption = tableElement.createCaption()
Ví dụ: Tạo caption cho bảng
<!DOCTYPE html>
<html>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
table { margin: 2rem auto; border-collapse: collapse; }
caption { color: #db133a; font-weight: bold; margin-bottom: 0.5rem; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
<body>
<h1>Demo: table.createCaption()</h1>
<table border="2" id="demoTable">
<tr><td>Tên</td><td>Mã SV</td></tr>
<tr><td>An</td><td>071717</td></tr>
<tr><td>Bình</td><td>031717</td></tr>
</table>
<button onclick="createCap()" class="btn">Tạo Caption</button>
<script>
function createCap() {
var table = document.getElementById('demoTable');
var cap = table.createCaption();
cap.innerHTML = "Danh sách sinh viên";
}
</script>
</body>
</html>
Kết quả:
- Ban đầu: Bảng không có tiêu đề.
- Sau nhấn nút: Caption "Danh sách sinh viên" hiển thị trên cùng bảng.
- Bảng chỉ có 1
<caption>. - Caption nên mô tả ngắn gọn nội dung bảng — tốt cho SEO và accessibility (screen reader đọc trước).
- Dùng khi xây dựng bảng động: tạo caption từ tên dataset, số lượng bản ghi, v.v.
Phương thức đối ngược: deleteCaption()
table.deleteCaption();