Atribut rowspan

Atribut rowspan mengawal penggabungan baris dalam jadual HTML. Digunakan pada tag th dan td.

Nilai yang diterima: integer bermula dari 1.

Cara penggunaan: tambahkan atribut ini kepada mana-mana sel td atau th. Jika, sebagai contoh, menetapkan rowspan kepada nilai 2 - maka sel yang ditetapkan ini akan mengambil dua baris dalam ketinggian jadual. Pada masa yang sama, sel dari baris di bawah tidak akan hilang, sel yang diperluas akan menggantikannya dan jadual akan rosak. Untuk mengelakkan ini, perlu mengeluarkan satu dari sel dari baris di bawah. Lihat contoh untuk pemahaman yang lebih baik.

Contoh . Jadual tanpa penggabungan

Mari kita lihat jadual tanpa penggabungan, yang akan kita gunakan seterusnya:

<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;
}

Contoh . Luaskan sel kepada dua baris

Sekarang mari kita luaskan sel 1 kepada dua baris, dengan menetapkan atribut rowspan kepada nilai 2. Kita akan lihat bahawa ia menggantikan sel dari baris di bawahnya dan jadual rosak:

<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;
}

Contoh . Luaskan sel tanpa merosakkan jadual

Untuk membetulkan masalah kerosakan jadual dari contoh sebelumnya, mari kita cuba mengeluarkan satu dari sel dari baris kedua (dan ini bukan semestinya sel 4 yang berada tepat di bawah sel kita 1, boleh mengeluarkan mana-mana, kami akan mengeluarkan sel bernombor 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;
}

Contoh . Luaskan sel kepada `3` baris

Di sini mari kita luaskan sel kita bukan kepada dua baris, tetapi kepada 3, tetapkan rowspan kepada nilai 3. Pada masa yang sama keluarkan satu dari sel dari baris ketiga (sel 7, 8 atau 9 - tidak mengira), supaya jadual tidak rosak:

<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;
}

Contoh . Luaskan lagi `2` lajur

Mari kita luaskan juga sel 2 kepada 2 lajur sebagai tambahan kepada sel pertama. Untuk ini, tambahkan colspan kepada sel 2 dalam nilai 2. Pada masa yang sama keluarkan sel 3, supaya jadual tidak rosak:

<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;
}

Lihat juga

atribut colspan,
yang menggabungkan lajur jadual