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

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

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

วิธีการใช้: เพิ่มแอตทริบิวต์นี้ ลงในเซลล์ td หรือ th ใดๆ ตัวอย่างเช่น หากตั้งค่า colspan เป็นค่า 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 ให้ครอบคลุมสอง คอลัมน์ โดยกำหนดแอตทริบิวต์ colspan ให้มีค่า 2 ในกรณีนี้มันจะแทนที่ เซลล์ทางด้านขวาและทำให้ตารางเสียรูป:

<table>
	<tr>
		<td colspan="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;
}

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

ตอนนี้มาลองแก้ไขปัญหาตารางเสียรูป จากตัวอย่างที่แล้ว โดยลบหนึ่ง ในเซลล์ทางด้านขวาของเราออก (นี่คือเซลล์ 2 หรือ 3 - ไม่แตกต่างกัน):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</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 ให้ครอบคลุม 3 คอลัมน์ และกำหนดแอตทริบิวต์ colspan ให้มีค่า 3 ในกรณีนี้ลบเซลล์อีกหนึ่งเซลล์ ทางด้านขวาออก เพื่อป้องกันไม่ให้ตารางเสียรูป:

<table>
	<tr>
		<td colspan="3">cell1</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;
}

ตัวอย่าง . ใช้ทั้ง colspan และ rowspan พร้อมกัน

มาลองรวมเซลล์หมายเลข 4, 5, 7 และ 8 เข้าด้วยกัน โดยใช้แอตทริบิวต์ colspan และ rowspan (ลบการรวมเซลล์ก่อนหน้าออกจากตาราง):

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

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

ดูเพิ่มเติม

แอตทริบิวต์ rowspan,
ซึ่งใช้สำหรับรวมแถวของตาราง