Đối tượng TableHeader (th) trong HTML DOM

Đối tượng TableHeaderCellElement (thường gọi là TableHeader) trong HTML DOM đại diện cho phần tử <th> — ô tiêu đề trong bảng. Cung cấp các thuộc tính điều khiển trải cột/hàng, liên kết header, và mô tả tóm tắt.

Tạo th động

var th = document.createElement("TH");

Các thuộc tính chính

Thuộc tính	Mô tả
`cellIndex`	Vị trí ô trong hàng chứa nó (0-based, read-only)
`colSpan`	Số cột ô này trải qua (mặc định 1). Đọc/ghi.
`rowSpan`	Số hàng ô này trải qua (mặc định 1). Đọc/ghi.
`headers`	Danh sách `id` của các header khác liên kết (cho accessibility). Đọc/ghi.
`abbr`	Mô tả tóm tắt cho screen reader. Đọc/ghi.
`scope`	Phạm vi header: `"col"`, `"row"`, `"colgroup"`, `"rowgroup"`, `"auto"`. Đọc/ghi.

Ví dụ: Tạo header động cho bảng

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; 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: Tạo th động</h1>
  <table border="2">
    <thead>
      <tr class="header-row"></tr>
    </thead>
    <tbody>
      <tr><td>An</td><td>Tiếng Anh</td></tr>
      <tr><td>Bình</td><td>Tiếng Đức</td></tr>
    </tbody>
  </table>
  <button onclick="createHeaders()" class="btn">Tạo Header</button>
  <script>
    function createHeaders() {
      var th1 = document.createElement("TH");
      var th2 = document.createElement("TH");
      th1.textContent = "Họ tên";
      th2.textContent = "Ngoại ngữ";
      th1.scope = "col";
      th2.scope = "col";
      document.querySelector('.header-row').appendChild(th1);
      document.querySelector('.header-row').appendChild(th2);
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hai ô header "Họ tên" và "Ngoại ngữ" xuất hiện, in đậm, canh giữa.

Thuộc tính scope — Quan trọng cho Accessibility

scope="col": Header cho cột (mặc định cho th trong thead).
scope="row": Header cho hàng (dùng cho th đầu tiên trong tbody).
scope="colgroup"/rowgroup: Header cho nhóm cột/hàng.

Screen reader dùng scope để phát âm: "Cột Họ tên, An" thay vì chỉ "An".

Lưu ý

cellIndex chỉ đọc (read-only).
colSpan/rowSpan thay đổi layout bảng — cần cẩn trọng khi bảng đã có dữ liệu.
Luôn set scope rõ ràng cho bảng dữ liệu phức tạp.