คุณสมบัติ rowSpan ของ TableData (<td>) ใน HTML DOM: ขยายเซลล์แนวตั้ง

คุณสมบัติ rowSpan คืออะไร?

คุณสมบัติ rowSpan ของเอลิเมนต์ <td> (และ <th>) ใช้ **กำหนดหรืออ่านจำนวนแถวที่เซลล์ขยายครอบคลุม** (Vertical merging) ค่าเริ่มต้นคือ 1 (ไม่ขยาย)

รูปแบบการใช้งาน (Syntax)

ใน HTML:

<td rowspan="3">ข้าม 3 แถว</td>

ใน JavaScript (DOM Property):

// อ่านค่า
var span = tdElement.rowSpan;

// ตั้งค่า (ต้องเป็นจำนวนเต็ม ≥ 1)
tdElement.rowSpan = 3;

ตัวอย่าง: ขยายเซลล์ "Elon" ครอบ 2 แถว

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; border-collapse: collapse; width: 400px; }
  th, td { border: 1px solid #333; padding: 8px; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }


ผลลัพธ์ก่อน/หลังกดปุ่ม


ก่อน
หลัง (rowSpan=2)




| ชื่อ   | ภาษา   |
|-------|--------|
| สมชาย | ไทย    |
| Elon  | German |
|       | French |


| ชื่อ   | ภาษา    |
|-------|----------|
| สมชาย | ไทย      |
| Elon  | German   |
|       | (merged) |





ข้อควรระวังในการใช้ rowSpan

**ลบเซลล์ที่ถูกครอบคลุม:** เมื่อตั้ง rowSpan > 1 เซลล์ในแถวถัดไปที่อยู่ในคอลัมน์เดียวกัน **จะถูกซ่อน/ลบออกจาก Layout** (แต่ยังอยู่ใน DOM หากเขียนใน HTML)
**JavaScript Dynamic:** หากเพิ่ม/ลบแถวด้วย JS ต้องปรับ rowSpan ให้สอดคล้อง
**ค่าต่ำสุดคือ 1:** ตั้งค่า 0 หรือลบ จะกลายเป็น 1 อัตโนมัติ
**Accessibility:** ใช้ headers attribute บนเซลล์ที่ถูกครอบคลุม เพื่อเชื่อมโยงกับ header ที่ถูกต้อง


การใช้งานร่วมกับ colSpan (Merge ทั้งแนวตั้งและแนวนอน)
<td rowspan="2" colspan="3">เซลล์ใหญ่ 2 แถว x 3 คอลัมน์</td>
// JS:
cell.rowSpan = 2;
cell.colSpan = 3;

การอ่าน rowSpan ของเซลล์ที่ถูก Merge
// เซลล์ที่ถูก merge (ไม่ใช่เจ้าของ rowSpan) จะมี rowSpan = 1 เสมอ
// ต้องตรวจสอบจากเซลล์เจ้าของ (Owner cell) ที่มี rowSpan > 1