Atribut rowspan

Atribut rowspan mengontrol penggabungan baris dalam tabel HTML. Diterapkan pada tag th dan td.

Nilai yang diterima: bilangan bulat mulai dari 1.

Cara penggunaan: tambahkan atribut ini ke sel mana pun td atau th. Jika, contohnya, mengatur rowspan ke nilai 2 - maka sel yang diatur tersebut akan menempati dua baris dalam tinggi tabel. Namun, sel-sel dari baris di bawahnya tidak hilang, sel kita yang meluas akan menggusurnya dan tabel akan rusak. Untuk menghindari hal ini, perlu menghapus satu sel dari baris di bawahnya. Lihat contoh untuk pemahaman yang lebih baik.

Contoh . Tabel tanpa penggabungan

Mari kita lihat tabel tanpa penggabungan, yang akan kita gunakan selanjutnya:

<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 . Perluas sel ke dua baris

Sekarang mari kita perluas sel 1 ke dua baris, dengan mengatur atribut rowspan ke nilai 2. Kita akan melihat bahwa sel tersebut menggusur sel-sel dari baris di bawahnya dan tabel menjadi rusak:

<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 . Perluas sel tanpa merusak tabel

Untuk memperbaiki masalah kerusakan tabel dari contoh sebelumnya, mari kita coba menghapus satu sel dari baris kedua (dan ini tidak harus sel 4 yang berada tepat di bawah sel kita 1, bisa menghapus yang mana saja, kami akan menghapus sel nomor 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 . Perluas sel ke `3` baris

Di sini mari kita perluas sel kita bukan dua baris, tetapi 3 baris, atur rowspan ke nilai 3. Sambil menghapus satu sel dari baris ketiga (sel 7, 8 atau 9 - tidak masalah), agar tabel tidak rusak:

<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 . Perluas lagi `2` kolom

Mari kita perluas juga sel 2 ke 2 kolom sebagai tambahan untuk sel pertama. Untuk ini, tambahkan colspan ke sel 2 dengan nilai 2. Sambil menghapus sel 3, agar tabel tidak rusak:

<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 kolom tabel