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

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

Cú pháp

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

// Đặt giá trị
tdElement.rowSpan = 2; // Trải qua 2 hàng

Ví dụ: Gộp ô dọc (merge rows)

<!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.rowSpan</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 id="elonCell">Elon</td><td>Tiếng Đức</td></tr>
      <tr><td>Tiếng Pháp</td></tr>
    </tbody>
  </table>
  <button onclick="spanElon()" class="btn">Gộp ô Elon (rowSpan=2)</button>
  <script>
    function spanElon() {
      document.getElementById('elonCell').rowSpan = 2;
      // Ô "Elon" sẽ trải qua 2 hàng, ô "Tiếng Pháp" dịch sang cột 2
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: 3 hàng dữ liệu, cột "Tên" có 3 ô riêng biệt.
2. Sau nhấn nút: Ô "Elon" mở rộng trải qua 2 hàng (hàng 2 và 3), ô "Tiếng Pháp" tự động chuyển thành ô thứ 2 của hàng 3.

Lưu ý quan trọng

• Khi set rowSpan > 1, các ô ở các hàng dưới cùng cột **bị ẩn** (không hiển thị) — chúng vẫn tồn tại trong DOM nhưng bị che khuất.
• Cần xóa hoặc điều chỉnh các ô bị che để tránh HTML không hợp lệ (validator sẽ cảnh báo).
• rowSpan = 0 có ý nghĩa đặc biệt: trải qua **tất cả hàng còn lại** trong section (thead/tbody/tfoot) — ít dùng, không hỗ trợ tốt trên mọi trình duyệt.
• Tương tự colSpan cho gộp ngang.

Ví dụ thực tế: Bảng thời khóa biểu

<table>
  <tr><th>Thứ</th><th>Buổi sáng</th><th>Buổi chiều</th></tr>
  <tr>
    <td rowSpan="2">Thứ 2</td>
    <td>Toán</td><td>Lý</td>
  </tr>
  <tr>
    <td>Hóa</td><td>Sinh</td>
  </tr>
</table>

Ô "Thứ 2" trải 2 hàng, gom nhóm các môn học cùng ngày.