Menggabungkan Kolom Dan Baris Dalam Tabel

Situseo Blog : Sekarang kita sudah memahami cara membuat sebuah tabel dalam sebuah posting, tulisan ini merupakan sambungan dari cara membuat tabel dalam postingan, bagi yang belum mengetahui cara membuat tabel sebaiknya melihat caranya dengan meng-klik link tersebut. Dalam sebuah tabel kadang kita perlu menyatukan atau menggabungkan sebuah kolom atau baris untuk membentuk suatu susunan data yang sesuai, teratur dan rapih.

Waktu kita melakukan pengisan data pada tabel, kadang data yang harus diisi terdiri dari beberapa baris dalam beberapa kolom dengan 1 judul. Untuk kolom judul yang membawahi beberapa baris dan kolom, kita harus melakukan penggabungan 2 kolom atau lebih untuk membawahi baris-baris tersebut, sebagai ilustrasi seperti tergambar pada tabel dibawah ini :

Gabungan Kolom
Baris 2 - Kolom 1	Baris 2 - Kolom 2
Baris 3 - Kolom 1	Baris 3 - Kolom 2

dalam tabel tersebut menggambarkan 1 judul kolom (Perhatikan Gabungan Kolom) membawahi 2 baris kolom pertama dan 2 baris kolom kedua, untuk membuat itu kita perlu menambahkan keterangan perintah tambahan pada kode kolom <td> pada kolom data berisi tulisan gabungan kolom dengan perintah colspan, seperti terlihat penggunaannya pada kode tabel dibawah ini :

<table border="5" width="400">  
<tr>  
<td colspan="2">Gabungan Kolom</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 3 - Kolom 1</td>  
<td>Baris 3 - Kolom 2</td>  
</tr>  
</table>

colspan adalah perintah untuk menggabungan beberapa kolom menjadi 1, seperti dalam kode diatas yaitu kode <td colspan="2"> menggambarkan perintah untuk menggabungkan 2 kolom, jika ingin menggabung 3 atau 4 kolom, kalian bisa mengubah angka 2 didepan kode colspan dengan jumlah kolom yang akan digabungkan.

Setelah mengatahui cara menggabungkan kolom menjadi satu, bagaimana dengan menggabungkan 2 atau beberapa baris menjadi satu, caranya sama dengan menggabungkan kolom menjadi satu, hanya kode keterangan perintah yang dipakai adalah rowspan, seperti tergambar pada deretan kode tabel dibawah ini :

<table border="5" width="400">  
<tr>  
<td colspan="2">Gabungan Kolom</td>  
</tr>  
<tr>  
<td rowspan="2">Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 3 - Kolom 2</td>  
</tr>  
</table>

dan hasilnya seperti ini :

Gabungan Kolom
Baris 2 - Kolom 1	Baris 2 - Kolom 2
	Baris 3 - Kolom 2

Dari kedua contoh penggabungan kolom dan baris diatas, kita sudah bisa membuat tabel dengan data-data yang lebih teratur dan rapih.

Demo Table

Semoga bermanfaat,
referensi : klikbelajar