Halo sahabat Jamane Komputer, kali ini saya ingin menyampaikan
sesuati tentang merge cell. Merge cell digunakan untuk menggabungkan beberapa
cel di dalam tabel menjadi satu. Untuk menggabungkan baris menggunakan perintah
rowspan dan untuk menggabungkan
kolom. menggunakan perintah colspan. Perhatikan uraian berikut ini
ya kawan:
<html>
<head>
<title>Contoh
Program Merge Cell di HTML</title>
</head>
<body>
<h1>Merge
Baris dan Kolom </h1>
<table
border="1">
<tr>
<td>Baris ke 1, Kolom ke
1</td>
<td>Baris ke 1, Kolom ke
2</td>
<td>Baris ke 1, Kolom ke
3</td>
</tr>
<tr>
<td>Baris ke 2, Kolom ke
1</td>
<td colspan="2" >Baris
ke 2, Kolom ke 2 & ke 3</td>
</tr>
<tr>
<td rowspan="2"> Baris
ke 3 & ke 4, Kolom ke 1</td>
<td> Baris ke 3, Kolom ke
2</td>
<td> Baris ke 3, Kolom ke
3</td>
</tr>
<tr>
<td> Baris ke 4, Kolom ke
2</td>
<td> Baris ke 4, Kolom ke
3</td>
</tr>
</table>
</body>
</html>
dari kode program di atas maka akan ditampilkan hasil berikut ini:
dari kode program di atas maka akan ditampilkan hasil berikut ini:
Uji
Coba
Untuk
lebih memahami uraian di atas, silahkan sobat jamane komputer untuk mencoba
latihan di bawah ini ya:
Uji coba 1:
Buatlah merge baris dan kolom sehingga akan menampilkan seperti di bawah ini:
Nama
file: uji_coba_1.html
<html>
<head>
<title>Uji
Coba 1</title>
</head>
<body>
<h1>Merge
Baris dan Kolom </h1>
<table
border="1">
<tr>
<td colspan="3">Baris
ke 1, Kolom ke 1 & ke 2 & ke 3</td>
</tr>
<tr>
<td>Baris ke 2, Kolom ke
1</td>
<td colspan="2" >Baris
ke 2, Kolom ke 2 & ke 3</td>
</tr>
<tr>
<td rowspan="2"> Baris
ke 3 & ke 4, Kolom ke 1</td>
<td> Baris ke 3, Kolom ke
2</td>
<td> Baris ke 3, Kolom ke
3</td>
</tr>
<tr>
<td colspan="2"> Baris
ke 4, Kolom ke 3</td>
</tr>
</table>
</body>
</html>
EmoticonEmoticon