แอตทริบิวต์ rowspan

แอตทริบิวต์ rowspan ควบคุมการรวม แถว ใน ตาราง HTML ใช้กับแท็ก th และ td

ค่าที่รับได้: จำนวนเต็มเริ่มต้น จาก 1

วิธีใช้: เพิ่มแอตทริบิวต์นี้ ลงในเซลล์ใดๆ td หรือ th หาก ตัวอย่างเช่น กำหนด rowspan เป็นค่า 2 - เซลล์ที่ได้รับการกำหนดนี้ จะครอบคลุม สองแถวตามความสูงของตาราง ในกรณีนี้ เซลล์ จากแถวล่างจะไม่หายไปไหน เซลล์ของเราที่ขยายออก จะดันเซลล์เหล่านั้นและตารางจะพัง เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น จำเป็นต้องลบหนึ่ง เซลล์ออกจากแถวล่าง ดูตัวอย่างสำหรับ ความเข้าใจที่ดีขึ้น

ตัวอย่าง . ตารางที่ไม่มีการรวม

มาดูตารางที่ไม่มีการรวมกัน ซึ่งเราจะทำงานด้วยต่อไป:

<table>
	<tr>
		<td>cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

ตัวอย่าง . ขยายเซลล์ครอบคลุมสองแถว

ทีนี้มาขยายเซลล์ 1 ให้ครอบคลุมสอง แถว โดยกำหนดแอตทริบิวต์ rowspan เป็นค่า 2 เราจะเห็นว่ามันดันเซลล์ จากแถวที่อยู่ด้านล่างและตารางพัง:

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

ตัวอย่าง . ขยายเซลล์โดยไม่ทำให้ตารางพัง

เพื่อแก้ไขปัญหาตารางพัง จากตัวอย่างที่แล้ว มาลอง ลบหนึ่งเซลล์ออกจากแถวที่สอง (และ นี่ไม่จำเป็นต้องเป็นเซลล์ 4 ที่ อยู่ใต้เซลล์ 1 ของเราโดยตรง สามารถลบเซลล์ใดก็ได้ เราจะลบเซลล์หมายเลข 5):

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

ตัวอย่าง . ขยายเซลล์ครอบคลุม `3` แถว

และที่นี่มาขยายเซลล์ของเราไม่ใช่ สองแถว แต่เป็น 3 แถว กำหนด rowspan ให้เป็นค่า 3 ในขณะเดียวกันลบหนึ่ง เซลล์ออกจากแถวที่สาม (เซลล์ 7, 8 หรือ 9 - ไม่สำคัญ) เพื่อไม่ให้ตาราง พัง:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

ตัวอย่าง . ขยายอีก `2` คอลัมน์

มาขยายเซลล์ 2 อีก 2 คอลัมน์ เพิ่มเติมจากเซลล์แรก สำหรับ สิ่งนี้ เพิ่ม colspan ให้เซลล์ 2 โดยกำหนดค่า เป็น 2 ในขณะเดียวกันลบเซลล์ 3 เพื่อไม่ให้ตารางพัง:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td colspan="2">cell2</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

ดูเพิ่มเติม

แอตทริบิวต์ colspan,
ซึ่งรวมคอลัมน์ของตาราง