แอตทริบิวต์ colspan ใน HTML: รวมเซลล์ตารางแนวนอน

ไวยากรณ์ (Syntax)

<td colspan="number">เนื้อหา</td>
<th colspan="number">หัวข้อ</th>

ตัวอย่าง: <td> colspan

<!DOCTYPE html>
<html>
<head>
  <style> table, th, td { border: 2px solid blue; border-collapse: collapse; padding: 8px; } </style>
</head>
<body>
  <h2>ค่าใช้จ่ายโครงการ</h2>
  <table>
    <tr><th>หมวดหมู่</th><th>ค่าใช้จ่าย</th></tr>
    <tr><td>พัฒนาผลิตภัณฑ์</td><td>500,000</td></tr>
    <tr><td>การตลาด</td><td>500,000</td></tr>
    <tr><td>บริการ</td><td>100,000</td></tr>
    <tr><td>สนับสนุน</td><td>100,000</td></tr>
    <tr><td>บำรุงรักษา</td><td>100,000</td></tr>
    <tr><td colspan="2">งบประมาณรวม = 1,300,000 บาท</td></tr>
  </table>
</body>
</html>

ตัวอย่าง: <th> colspan

<table>
  <tr><th colspan="2">ค่าใช้จ่าย</th></tr>
  <tr><td>พัฒนาผลิตภัณฑ์</td><td>500,000</td></tr>
  <tr><td>การตลาด</td><td>500,000</td></tr>
  <!-- ... -->
</table>

ผลลัพธ์

แถวสุดท้าย (colspan="2") เซลล์เดียวครอบคลุม 2 คอลัมน์ (หมวดหมู่ + ค่าใช้จ่าย) สำหรับแสดงยอดรวม

กติกาการใช้ colspan

• จำนวนคอลัมน์รวมในแถว (รวม colspan) ต้องเท่ากันทุกแถว
• เช่น ตาราง 3 คอลัมน์: แถวหนึ่งมี colspan="2" + colspan="1" = 3 คอลัมน์
• ใช้ได้กับ <td> และ <th> เท่านั้น
• ค่าเป็นจำนวนเต็มบวก (1, 2, 3, ...)

คู่มือ: rowspan

สำหรับรวมเซลล์แนวตั้ง (แถว) ใช้ rowspan แทน ดูรายละเอียดในบทความ HTML rowspan Attribute