Thuộc tính headers của TableData (td) trong HTML DOM

Thuộc tính headers của đối tượng HTMLTableCellElement (<td> hoặc <th>) dùng để **liên kết ô dữ liệu với một hoặc nhiều ô tiêu đề (<th>)** thông qua thuộc tính id. Đây là cơ chế **accessibility** quan trọng giúp screen reader phát âm đúng ngữ cảnh: "Cột Tên, hàng An" thay vì chỉ "An".

Cú pháp

// Lấy giá trị (chuỗi các id cách nhau bởi dấu cách)
var ids = tdElement.headers;

// Đặt giá trị
tdElement.headers = "idHeader1 idHeader2";

Ví dụ: Liên kết ô dữ liệu với header

<!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; }
  .show { font-size: 1.2rem; margin-top: 1rem; }

<body>
  <h1>Demo: td.headers</h1>
  <table border="2">
    <thead>
      <tr>
        <th id="hName">Tên</th>
        <th id="hRoll">Mã SV</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td headers="hName">An</td>
        <td headers="hRoll">071717</td>
      </tr>
      <tr>
        <td headers="hName" id="janeCell">Bình</td>
        <td headers="hRoll">031717</td>
      </tr>
    </tbody>
  </table>
  <button onclick="showHeaders()" class="btn">Hiện headers của ô "Bình"</button>
  <div class="show" id="result"></div>
  <script>
    function showHeaders() {
      document.getElementById('result').textContent = 'headers = "' + document.getElementById('janeCell').headers + '"';
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hiển thị: headers = "hName"

Khi nào cần dùng headers?

• Bảng phức tạp: header không ở hàng đầu/cột đầu, hoặc header chia nhóm (colgroup, rowgroup).
• Một ô dữ liệu liên quan đến **nhiều header** (ví dụ: ô giao điểm của hàng "Q3" và cột "Doanh thu" → headers="q3Header revenueHeader").
• Tuân thủ WCAG: Bảng dữ liệu phức tạp **bắt buộc** dùng headers/id hoặc scope.

headers vs scope

Khuyên dùng: Bảng đơn giản → scope="col|row" trên <th>. Bảng phức tạp → id trên <th> + headers trên <td>.