วิธีตั้งค่าจำนวนแถวที่เซลล์ตารางควรครอบคลุมใน HTML

ใช้แอตทริบิวต์ rowspan เพื่อกำหนดจำนวนแถวที่เซลล์ตาราง (<td> หรือ <th>) ควรครอบคลุม (span) สำหรับการรวมเซลล์ในแนวตั้ง ในขณะที่ colspan ใช้สำหรับการรวมเซลล์ในแนวนอน (คอลัมน์)

ความแตกต่างระหว่าง rowspan และ colspan

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { 
      border: 1px solid black; 
      border-collapse: collapse;
      width: 100px;
      height: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง rowspan และ colspan</h1>
  <table>
    <tr>
      <th colspan="2">หัวข้อรวม 2 คอลัมน์</th>
      <th>คอลัมน์ปกติ</th>
    </tr>
    <tr>
      <td>ข้อมูล 1</td>
      <td>ข้อมูล 2</td>
      <td rowspan="2">เซลล์นี้ครอบ 2 แถว</td>
    </tr>
    <tr>
      <td>ข้อมูล 3</td>
      <td>ข้อมูล 4</td>
    </tr>
  </table>
</body>
</html>

เคล็ดลับการใช้งาน

• เมื่อใช้ rowspan หรือ colspan ให้ลบแท็ก <td> หรือ <th> ที่ถูกรวมออกจากโค้ด เพื่อไม่ให้เกิดเซลล์ซ้ำ
• ค่าต้องเป็นจำนวนเต็มบวก (1, 2, 3, ...)
• ใช้ร่วมกับ scope เพื่อการเข้าถึงที่ดีขึ้น

กรณีใช้งานจริง

เหมาะสำหรับตารางข้อมูลที่มีหัวข้อย่อย (sub-headers) หรือตารางสรุปข้อมูลที่ต้องการแสดงหมวดหมู่หลักครอบคลุมรายการย่อย