Phương thức createTHead() của Table trong HTML DOM

Phương thức createTHead() của đối tượng HTMLTableElement tạo một phần tử <thead> rỗng và thêm vào bảng (làm hàng đầu tiên). Nếu bảng đã có <thead>, trả về thead hiện có (không tạo mới).

Cú pháp

var thead = tableElement.createTHead()

Ví dụ: Tạo header cho bảng không có thead

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; border-collapse: collapse; }
  .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.createTHead()</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="createHead()" class="btn">Tạo Header</button>
  <script>
    function createHead() {
      var table = document.getElementById('demoTable');
      var head = table.createTHead();
      head.innerHTML = "<tr><th>Tên</th><th>Mã SV</th></tr>";
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Bảng 3 hàng, không phân biệt header.
2. Sau nhấn nút: Hàng đầu tiên chuyển vào <thead>, in đậm, canh giữa (mặc định trình duyệt).

Phương thức đối ngược: deleteTHead()

table.deleteTHead();

Lưu ý

• Bảng chỉ có 1 <thead>. Gọi lại createTHead() trả về thead cũ.
• Thường dùng khi xây dựng bảng động từ dữ liệu JSON: tạo thead từ keys của object đầu tiên.
• Kết hợp thead.innerHTML hoặc thead.appendChild(row) để điền nội dung.