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

Thuộc tính colSpan của đối tượng HTMLTableCellElement (<td> hoặc <th>) dùng để **lấy hoặc đặt** số cột mà ô đó trải qua (merge ngang). Giá trị mặc định là 1.

Cú pháp

// Lấy giá trị
var span = tdElement.colSpan;

// Đặt giá trị
tdElement.colSpan = 2; // Trải qua 2 cột

Ví dụ: Gộp ô ngang cho footer

<!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: td.colSpan</h1>
  <table border="2">
    <thead>
      <tr><th>Tên</th><th>Mã SV</th></tr>
    </thead>
    <tbody>
      <tr><td>An</td><td>071717</td></tr>
      <tr><td>Bình</td><td>031717</td></tr>
    </tbody>
    <tfoot>
      <tr><td id="footCell">Chân trang</td></tr>
    </tfoot>
  </table>
  <button onclick="spanFooter()" class="btn">Gộp footer 2 cột</button>
  <script>
    function spanFooter() {
      document.getElementById('footCell').colSpan = 2;
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Footer chỉ có 1 ô "Chân trang" ở cột 1, cột 2 trống.
2. Sau nhấn nút: Ô "Chân trang" mở rộng trải qua 2 cột, canh giữa.

Lưu ý quan trọng

• Khi set colSpan > 1, các ô liền kề bên phải **bị ẩn** (che khuất) — vẫn tồn tại trong DOM.
• Cần xóa hoặc điều chỉnh các ô bị che để HTML hợp lệ.
• colSpan = 0: Trải qua tất cả cột còn lại trong colgroup (hiếm dùng, hỗ trợ kém).
• Tương tự rowSpan cho gộp dọc.

Ví dụ thực tế: Bảng báo cáo có tiêu đề nhóm

<table>
  <tr>
    <th colspan="2">Quý 1</th>
    <th colspan="2">Quý 2</th>
  </tr>
  <tr>
    <th>Tháng 1</th><th>Tháng 2</th>
    <th>Tháng 3</th><th>Tháng 4</th>
  </tr>
  <tr>
    <td>100</td><td>120</td><td>110</td><td>130</td>
  </tr>
</table>

Hai ô "Quý 1" và "Quý 2" dùng colSpan=2 làm header nhóm.