บทเรียนออนไลน์ คุณครูอิทธิวิธิ สินศิริ

4.2 การยืดขนาดเซลล์หรือการผสานเซลล์ในตาราง
การยืดขนาดเซลล์ (Spanning)จะเป็นการกำหนดให้เซลล์นั้นมีขนาดความกว้างหรือความสูงเท่ากับ
กี่เซลล์รวมกัน ซึ่งจะดูเหมือนกับเป็นการผสานเซลล์(Merging)ที่ทำให้เซลล์หลายๆเซลล์ในตารางถูกรวม
เป็นเซลล์เดียว ซึ่งสามารถกระทำได้ทั้งเซลล์ในแนวนอนและแนวตั้ง

4.2.1 การผสานเซลล์ในแนวนอน
สามารถทำได้โดยการระบุคำสั่ง rowspan ลงในแท็ก <td>

รูปแบบ

<td colspan= "จำนวนคอลัมน์"> ข้อความ</td>

Colspan

  เป็นการกำหนดให้ทำการยืดขยายช่องเซลล์นั้นให้มีความกว้าง เท่ากับ
  จำนวนคอลัมน์ ที่ระบุ
  เช่น colpan =3 หมายถึง ให้ช่องเซลล์นั้นจะมีความกว้างเท่ากับ 3 คอลัมน์

4.2.2 การผสานเซลล์ในแนวตั้ง
สามารถทำได้โดยการระบุคำสั่ง rowspan ลงในแท็ก <td>

รูปแบบ

<td rowspan = "จำนวนแถว"> ข้อความ</td>

Rowspan

เป็นการกำหนดให้ทำการยืดขยายช่องเซลล์นั้นให้มีความสูงเท่ากับ จำนวนแถว ที่ระบุ
เช่น rowspan =5 หมายถึง ให้ช่องเซลล์นั้นจะมีความสูงเท่ากับ 5 แถว

ตัวอย่างการผสานเซลล์

<!DOCTYPE html>
<html>
<head>
<title>table tag</title>
</head>
<body>
<table width="600" border="1" cellspacing="5" cellpadding="2">

<tr>
<th colspan="4" align="center"><h3>หนังสือดีมีคุณภาพ </h3></th>
</tr>
<tr>
<td rowspan="4"><b>หลักสูตรใหม่</b></td>

          <th align="center">ชื่อหนังสือ</th>
          <th align="center">ผู้เขียน</th>
          <th align="center">ราคาปก</th>
</tr>
<tr>
          <td>คณิตศาสตร์คอมพิวเตอร์</td>
          <td>สิทธิชัย ประสานวงศ์</td>
          <td align="right">75</td>
</tr>
<tr>
          <td>โปรแกรมตารางการคำนวณ</td>
          <td>สิทธิชัย ประสานวงศ์</td>
          <td align="right">95</td>
</tr>
<tr>
          <td>โปรแกรมกราฟิก</td>
          <td>สิทธิชัย ประสานวงศ์</td>
          <td align="right">140</td>
</tr>
</table>

</body>
</html>

ผลที่ได้บนเบราว์เซอร์