Rowspan และ Colspan ใน HTML คืออะไร? วิธีใช้งาน

rowspan และ colspan เป็น attribute ของ <td> และ <th> ใช้สำหรับรวมเซลล์ข้ามหลายแถวหรือหลายคอลัมน์

คำอธิบาย

• rowspan="n" - รวมเซลล์ข้าม n แถว (แนวตั้ง)
• colspan="n" - รวมเซลล์ข้าม n คอลัมน์ (แนวนอน)
• ค่าเป็นตัวเลขจำนวนเต็มบวก (1, 2, 3, ...)

ตัวอย่างโครงสร้าง

<table>
  <tr>
    <th colspan="2"></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td rowspan="3"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

การจินตนาการ

colspan="2" เซลล์กินพื้นที่ 2 คอลัมน์

rowspan="3" เซลล์กินพื้นที่ 3 แถว

เคล็ดลับ

• นับจำนวน <td>/<th> ในแต่ละ <tr> ให้รวมกับ colspan/rowspan ให้เท่ากันทุกแถว
• วาดตารางบนกระดาษก่อนเขียนโค้ด จะง่ายกว่า
• ใช้ border-collapse: collapse เพื่อดูโครงสร้างชัดเจน