Phương thức createCaption() của bảng (Table) trong HTML DOM

Phương thức createCaption() của đối tượng Table trong HTML DOM tạo một phần tử <caption> rỗng và thêm nó vào bảng. Nếu bảng đã có caption, phương thức này trả về caption hiện có (không tạo mới).

Cú pháp

tableObject.createCaption()

Ví dụ minh họa

<!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">
    <tr><th>Tên</th><th>Mã SV</th></tr>
    <tr><td>An</td><td>071717</td></tr>
    <tr><td>Bình</td><td>031717</td></tr>
  </table>
  <button onclick="createCaption()" class="btn">Tạo Caption</button>
  <script>
    function createCaption() {
      var caption = document.querySelector('table').createCaption();
      caption.innerHTML = "Danh sách sinh viên";
    }
  </script>
</body>
</html>

Kết quả

Ban đầu bảng không có tiêu đề.
Sau khi nhấn nút "Tạo Caption", dòng chữ "Danh sách sinh viên" xuất hiện trên cùng bảng.
Nếu nhấn lại nút, caption hiện có sẽ được cập nhật nội dung (không tạo bản sao).

Phương thức liên quan

deleteCaption(): Xóa caption khỏi bảng.
caption (thuộc tính): Trả về caption hiện tại hoặc null nếu chưa có.

Sử dụng createCaption() thay vì viết cứng <caption> trong HTML cho phép thêm tiêu đề động dựa trên điều kiện (ví dụ: chỉ hiển thị caption khi có dữ liệu).