Menggabungkan Baris dan Kolom pada Tabel

Setelah pengenalan, pembuatan, dan menambahkan baris dan kolom yang sudah kita pelajari pada postingan sebelumnya. Bagi yang belum mengerti bisa membaca postingan sebelumnya terlebih dulu tentang cara membuat tabel dan bagaimana menambahkan baris dan kolom pada tabel, bisa langsung ikuti link tulisan tersebut. Kali ini bergulir pada cara menggabungkan baris dan kolom pada tabel.

Tidak semudah membuat tabel pada Microsoft Exel maupun Word, untuk menggabungkan baris dan kolom tabel di postingan blog agar terlihat lebih bagus dan rapi sedikit lebih rumit. Karena kita harus memahami sedikit tentang perintah HTML-nya. Jangan khawatir bagi kalian yang tidak begitu mengerti tentang HTML, saya pun begitu masih belum mengerti. Tapi, menurut saya ini hanya perintah mudah yang bisa dipelajari siapapun. Untuk lebih jelasnya baca urain dibawah.

Menggabungkan kolom

<table border="2" 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>
Kode diatas adalah untuk penggunaan tabel dengan penggabungan 2 kolom yang ada pada baris pertama (Perhatikan bagian "Gabungan Kolom"). Untuk membuat seperti itu kalian harus menambahkan perintah colspan pada td atau kolom. Bisa dilihat diatas saya menggunakan perintah tersebut dengan <td colspan="2">. Artinya, saya menggabungkan 2 kolom. Jika kalian ingin menggabungkan lebih dari dua kolom, harus merubah angka 2 setelah kode colspan. Hasil kode diatas akan seperti berikut:

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

Menggabungkan Baris

Pada dasarnya untuk menggabungkan baris tabel, penggunaannya sama persis dengan menggabungkan kolom jadi penjelasannya tidak akan saya ulang. Perbedaan hanya terletak pada perintah yang digunakan, jika tadi perintahnya adalah colspan untuk menggabungkan kolom makan rowspan untuk menggabungkan baris. Bisa diperhatikan sendiri pada kode dibawah bagaimana pengaplikasiannya.

<table border="2" 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>

Kkode diatas adalah kode yang sebelumnya hanya menggabungkan kolom dan saya tambahkan panggabungan baris pada baris pertama-kolom 2 dan 3. Hasilnya akan terlihat seperti berikut :

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

Selesai sudah mengenai tabel, dimulai dengan pengenalan juga cara pembuatan tabel, kemudian bagaimana cara menambahkan baris dan kolom dan sekarang yang baru saja kita pelajari cara menggabungkan baris dan kolom. Semoga bermanfaat. ***

Related Posts:

Disqus Comments
© 2017 Obachti 95 - Template Created by goomsite - Proudly powered by Blogger