Đối tượng TableData (td) trong HTML DOM

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

Tạo td động

var td = document.createElement("TD");

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 `<th>` liên kết (cho accessibility). Đọc/ghi.

Ví dụ: Thêm ô dữ liệu vào hàng có sẵn

<!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 td động</h1>
  <table border="2">
    <thead>
      <tr><th>Tên</th><th>Ngôn ngữ</th></tr>
    </thead>
    <tbody>
      <tr><td>An</td><td>Tiếng Anh</td></tr>
      <tr><td>Bình</td><td>Tiếng Đức</td></tr>
      <tr class="new-row"></tr>
    </tbody>
  </table>
  <button onclick="addCells()" class="btn">Thêm ô vào hàng trống</button>
  <script>
    function addCells() {
      var td1 = document.createElement("TD");
      var td2 = document.createElement("TD");
      td1.textContent = "Cường";
      td2.textContent = "Tiếng Pháp";
      document.querySelector('.new-row').appendChild(td1);
      document.querySelector('.new-row').appendChild(td2);
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hàng trống cuối cùng được điền "Cường | Tiếng Pháp".

Phương pháp thay thế: insertCell()

Thay vì tạo TD riêng, có thể dùng phương thức của hàng:

var row = document.querySelector('.new-row');
var cell = row.insertCell(0); // Tự tạo <td> và chèn
cell.textContent = "Dũng";

Lưu ý

cellIndex chỉ đọc, cập nhật tự động khi chèn/xóa ô khác.
colSpan/rowSpan thay đổi cấu trúc bảng — kiểm tra layout sau khi set.
headers attribute: giá trị là danh sách id của <th> cách nhau bởi dấu cách. Ví dụ: headers="nameCol langCol".
Dùng scope trên <th> thay vì headers trên <td> nếu có thể (đơn giản hơn).