การรวมเซลล์ (Merge Cells) ใช้ rowspan (แนวตั้ง) และ 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>
ตัวอย่าง: รวมเซลล์ด้วย rowspan และ colspan
<table>
<tr>
<th colspan="2">หัวรวม 2 คอลัมน์</th>
<th>คอลัมน์ที่ 3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td rowspan="2">เซลล์สูง 2 แถว</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
<!-- ไม่มี td ตัวที่ 3 เพราะ rowspan กินไปแล้ว -->
</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 colspan="2">Header 1-2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td rowspan="2">Cell C (rowspan=2)</td>
</tr>
<tr>
<td>Cell D</td>
<td>Cell E</td>
</tr>
</table>
</body>
</html>
หลักการสำคัญ
- แถวที่มี rowspan จะ "กิน" เซลล์ในแถวถัดไป ต้องลบ
<td>ตัวนั้นออกในแถวถัดไป - ควรวาดตารางผังก่อนเขียนโค้ด
