คุณสมบัติ colSpan คืออะไร?
คุณสมบัติ colSpan ของเอลิเมนต์ <td> (และ <th>) ใช้ **กำหนดหรืออ่านจำนวนคอลัมน์ที่เซลล์ขยายครอบคลุม** (Horizontal merging) ค่าเริ่มต้นคือ 1 (ไม่ขยาย)
รูปแบบการใช้งาน (Syntax)
ใน HTML:
<td colspan="2">ข้าม 2 คอลัมน์</td>
ใน JavaScript (DOM Property):
// อ่านค่า
var span = tdElement.colSpan;
// ตั้งค่า (ต้องเป็นจำนวนเต็ม ≥ 1)
tdElement.colSpan = 2;
ตัวอย่าง: ขยายเซลล์ท้ายตาราง (Footer) ครอบ 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; }
ผลลัพธ์ก่อน/หลังกดปุ่ม
| ก่อน | หลัง (colSpan=2) |
|---|
| ชื่อ | เลขที่ |
|-------|------|
| สมชาย | 001 |
| สมหญิง| 002 |
| ท้ายตาราง | |
|
| ชื่อ | เลขที่ |
|-------|------|
| สมชาย | 001 |
| สมหญิง| 002 |
| ท้ายตาราง (ครอบ 2 คอลัมน์) |
|
ข้อควรระวังในการใช้ colSpan
- **ลบเซลล์ที่ถูกครอบคลุม:** เมื่อตั้ง
colSpan > 1 เซลล์ถัดไปในแถวเดียวกัน **จะถูกซ่อน/ลบออกจาก Layout** (แต่ยังอยู่ใน DOM หากเขียนใน HTML)
- **JavaScript Dynamic:** หากเพิ่ม/ลบเซลล์ด้วย JS ต้องปรับ colSpan ให้สอดคล้องกับจำนวนคอลัมน์จริง
- **ค่าต่ำสุดคือ 1:** ตั้งค่า 0 หรือลบ จะกลายเป็น 1 อัตโนมัติ
- **ค่าสูงสุด:** ไม่ควรเกินจำนวนคอลัมน์ทั้งหมดของตาราง
- **Accessibility:** ใช้
headers attribute บนเซลล์ที่ขยาย เพื่อระบุ header ที่เกี่ยวข้องทั้งหมด
การใช้งานร่วมกับ rowSpan (Merge ทั้งแนวนอนและแนวตั้ง)
<td rowspan="2" colspan="3">เซลล์ใหญ่ 2 แถว x 3 คอลัมน์</td>
// JS:
cell.rowSpan = 2;
cell.colSpan = 3;
การอ่าน colSpan ของเซลล์ที่ถูก Merge
// เซลล์ที่ถูก merge (ไม่ใช่เจ้าของ colSpan) จะมี colSpan = 1 เสมอ
// ต้องตรวจสอบจากเซลล์เจ้าของ (Owner cell) ที่มี colSpan > 1
ความแตกต่าง: HTML Attribute vs DOM Property
| HTML Attribute |
DOM Property |
colspan (lowercase) | colSpan (camelCase) |
| String | Integer (Long) |
td.getAttribute('colspan') | td.colSpan |
