Atribut colspan

Atribut colspan mengontrol penggabungan kolom 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 colspan ke nilai 2 - maka sel yang diberi atribut ini akan menempati dua kolom tabel. Namun, sel-sel yang berdekatan di sebelah kanan tidak akan hilang, sel kita yang melebar akan mendorongnya dan tabel akan rusak. Agar hal ini tidak terjadi, perlu menghapus satu dari sel di sebelah kanan. 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 . Melebarkan sel menjadi dua kolom

Mari kita coba melebarkan sel 1 menjadi dua kolom, dengan memberikan atribut colspan dengan nilai 2. Hal ini akan mendorong sel-sel di sebelah kanan dan tabel akan rusak:

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

Contoh . Melebarkan sel tanpa merusak tabel

Sekarang mari kita coba perbaiki masalah kerusakan tabel dari contoh sebelumnya, hapus satu dari sel di sebelah kanan sel kita (ini adalah sel 2 atau 3 - tidak masalah):

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

Contoh . Melebarkan sel menjadi tiga kolom

Mari kita lebarkan sel 1 menjadi 3 kolom dan berikan atribut colspan dengan nilai 3. Dengan demikian, hapus satu sel lagi di sebelah kanan, agar tabel tidak rusak:

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

Contoh . colspan dan rowspan secara bersamaan

Mari kita coba gabungkan sel dengan nomor 4, 5, 7 dan 8, dengan menggunakan atribut colspan dan rowspan (penggabungan sebelumnya kita hapus dari tabel):

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

Lihat juga

atribut rowspan,
yang menggabungkan baris tabel