วิธีรวมคอลัมน์ตารางใน HTML ด้วย Colspan

ใช้ attribute colspan ใน <td> หรือ <th> เพื่อรวมคอลัมน์ที่ติดกัน

ตัวอย่าง: ตารางปกติ 3x3

<table>
  <tr><th></th><th></th><th></th></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

ตัวอย่าง: รวม 2 คอลัมน์แรก (colspan="2")

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

โค้ดเต็มพร้อมสไตล์

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 1px solid black; width: 100px; height: 50px; }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <table>
    <tr><th></th><th></th><th></th></tr>
    <tr><td colspan="2">รวม 2 คอลัมน์</td><td>คอลัมน์ที่ 3</td></tr>
    <tr><td>A</td><td>B</td><td>C</td></tr>
  </table>
</body>
</html>

หลักการนับ

แถวที่มี colspan="2" จะมี <td> น้อยกว่าปกติ 1 ตัว (เพราะ 1 td = 2 คอลัมน์)