Bagaimana cara menggabungkan tabel atau merge cell pada tabel di postingan Blogger?. Anda mungkin sudah tidak asing dengan istilah “merge cell” pada Microsoft Excel ataupun Microsoft Word. Merge cell adalah suatu metode menggabungkan beberapa sel menjadi satu dalam sebuah tabel.
Penggunaan merge cell tentunya sangat dibutuhkan dalam penyusunan informasi dalam tabel yang membutuhkan penggabungan beberapa sel menjadi satu.
Untuk informasi lebih lanjut, mari simak penjelasan dibawah ini.
Pada artikel ini saya akan berbagi pengetahuan tentang definisi dan fungsi atribut rowspan dan colspan pada tabel html serta cara menggunakan atribut rowspan dan colspan untuk pemformatan tabel html di blogger maupun wordpress dan bahkan browser seperti firefox, chrome, opera, safari, internet explorer dan lain sebagainya.
Daftar Isi Artikel:
Mungkin ada yang mengatakan bahwa rowspan dan colspan merupakan metode untuk "menghilangkan garis (border) antara dua kolom atau lebih", saya tidak mengatakan itu salah tetapi saya juga tidak membenarkan pernyataan tersebut.
Karena menurut saya peryataan tersebut hanya untuk memberikan ilustrasi yang tepat untuk fungsi rowspan dan colspan atau hanya sebuah permainan "keyword" saja untuk menarik pengguna Excel, sedangkan;
Ilustrasi yang tepat untuk menggambarkan fungsi atribut rowspan dan colspan pada tabel html adalah; rowspan untuk menggabungkan baris (row) sedangkan colspan untuk menggabungkan kolom (column).
Sekarang mari kita bahas definisi dan fungsi atribut rowspan dan colspan yang sebenarnya, perhatikan contoh gambar berikut ini agar lebih mudah untuk memahaminya.
Definisi Dan Fungsi
Rowspan
Rowspan adalah atribut tabel html yang berfungsi untuk membuat suatu kolom sama tinggi dengan 2 atau lebih kolom (column) di sebelahnya.
Rowspan terdiri dari dua kata yaitu row dan span, dimana row berarti baris dan span adalah jangkauan atau kesetaraan, jadi rowspan dapat dipahami sebagai jangkauan/kesetaraan baris, jika rowspan="3" maka jangkauan baris-nya setara dengan tiga baris disebelahnya.
Colspan
Colspan adalah atribut tabel html yang berfungsi untuk membuat suatu kolom (column) sama lebar dengan beberapa kolom di bawah atau di atas-nya.
Colspan juga terdiri dari dua kata yaitu col dan span, dimana col berarti kolom (column) dan span adalah jangkauan atau kesetaraan, jadi colspan dapat diartikan sebagai jangkauan/kesetaraan kolom (column), jika colspan="2" maka jangkauan kolom-nya setara dengan dua kolom di atas atau di bawahnya.
Umumnya rowspan dan colspan digunakan pada tag <th> (markup kolom header) dan tag <td> (markup kolom body) untuk pemformatan tabel html seperti yang terlihat pada gambar tabel di atas.
Penggunaan Rowspan dan Colspan
Contoh Penerapan pada tag Header
Berikut ini adalah contoh penggunaan rowspan dan colspan pada kolom (column) header yaitu tag <th>.
<table>
<thead>
<tr>
<th rowspan="2">Nama</th>
<th colspan="2">Jenis Kelamin</th>
<th rowspan="2">Alamat</th>
</tr>
<tr>
<th>Laki-Laki</th>
<th>Perempuan</th>
</tr>
</thead>
<tbody>
<!-- baris (row) dan kolom (column) body disini -->
</tbody>
</table>
Keterangan : <tr> adalah markup atau tag yang mendefinisikan baris (row), dan <th> adalah markup yang mendefinisikan kolom (column) header.
Coba perhatikan, pada markup table di atas terdapat dua baris header, baris pertama terdiri dari 3 kolom sedangkan baris kedua terdiri dari 2 kolom.
Jika rowspan dan colspan dihilangkan maka tampilan header tabel tersebut akan terlihat sangat buruk bahkan maksud tabel tidak dapat dipahami, seperti yang terlihat pada contoh di bawah ini.
|
Nama
|
Jenis Kelamin
|
Alamat
|
|---|---|---|
|
Laki-Laki
|
Perempuan
|
Akan tetapi ketika rowspan dan colspan difungsikan maka tampilan tabel menjadi teratur dan maksud dari tabel dapat dipahami dengan mudah, lihat preview header tabel berikut setelah menggunakan rowspan dan colspan.
|
Nama
|
Jenis Kelamin
|
Alamat
|
|
|---|---|---|---|
|
Laki-Laki
|
Perempuan
|
||
Keterangan : atribut rowspan="2" mengatur tinggi satu kolom setara dengan dengan dua baris kolom, sedangkan atribut colspan="2" mengatur lebar satu kolom setara dengan lebar dua kolom.
Dimana, "2" adalah jumlah kolom atau baris yang ingin disetarai, jika kamu ingin menyetarakan suatu kolom sama tinggi dengan tiga kolom di sebelahnya maka ubah value rowspan menjadi rowspan="3", begitu juga sebaliknya dengan colspan.
Contoh Penerapan pada tag Body
Di bawah ini adalah contoh penggunaan atribut rowspan pada kolom body, pada contoh ini elemen <thead> saya hapus dulu agar kita fokus pada markup kolom atau cell body saja untuk saat ini.
<table>
<tbody>
<tr>
<td rowspan="4">Saya adalah rowspan="4"</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Keterangan : Markup di atas adalah markup table body yang terdiri dari tujuh row (baris) dan empat column (kolom).
Tetapi ketika rowspan="4" ditambahkan pada kolom pertama dan baris pertama maka, jumlah kolom body pada baris 2, 3 dan 4 harus dikurangi masing-masing menjadi tiga kolom, karena rowspan="4" setara dengan 4 baris kolom, seperti yang terlihat pada contoh dibawah ini.
Hasil penerapan kode tampak seperti berikut ini:
| Saya adalah rowspan="4" | |||
Contoh Penerapan pada tag Header dan Body
Berikut adalah contoh penggunaan atribut colspan pada kolom (column) body yaitu tag <td>.
<table>
<thead>
<tr>
<th rowspan="2">Nama</th>
<th colspan="2">Jenis Kelamin</th>
<th rowspan="2">Alamat</th>
</tr>
<tr>
<th>Laki-Laki</th>
<th>Perempuan</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">Saya adalah colspan="3".</td>
<td></td>
</tr>
</tbody>
</table>
Keterangan : Mayoritas kolom body terdiri dari 4 kolom, maka disamping colspan="3" hanya perlu ditambahkan satu kolom lagi agar semua kolom sejajar, karena colspan="3" itu sendiri setara dengan tiga kolom di atasnya.
Hasil penerapannya tampak seperti tabel berikut ini:
|
Nama
|
Jenis Kelamin
|
Alamat
|
|
|---|---|---|---|
|
Laki-Laki
|
Perempuan
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Saya adalah colspan="3"
|
|
||
Sampai pada tahap ini pembelajaran kita tentang rowspan dan colspan masih soal markup saja dan belum membahas soal css, meskipun pada table preview saya menggunakan css, tetapi anggap saja itu tanpa css.
Lagi pula ketika kamu mencoba markup tersebut tanpa css, hasilnya tidak jauh berbeda dengan yang kalian lihat pada table preview kecuali pada lebar kolomnya saja.
Saya sengaja memisahkan pembahasan soal css nya agar kalian paham dulu soal rowspan dan colspan dan cara penggunaanya, sekarang mari kita bahas soal css.
Pengaturan CSS (Cascading Style Sheets)
Berikut adalah contoh tabel dasar tanpa atribut rowspan dan colspan, beserta nomor kolom/cell yang menjadi selektor cell tabel.
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
Selektor CSS Kolom atau Cell
1 = :nth-child(1) atau :first-child
2 = :nth-child(2)
3 = :nth-child(3)
4 = :nth-child(4) atau :last-child
// example: table td:nth-child(2){pengaturan css disini} //
Tapi ketika menggunakan atribut rowspan atau colspan, beberapa kolom dan cell akan terdampak sehingga menyebabkan perubahan pada posisi (nomor) kolom dan urutan cell-nya.
| 1 (rowspan) | 2 | 3 | 4 |
| 1 | 2 | 3 | |
| 1 | 2 | 3 | |
| 1 | 2 | 3 | |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
Artinya selektor css default pada kolom dan cell yang terdampak oleh rowspan atau colspan menjadi lebih rumit untuk diterapkan, harus ditambahkan class="name" atau id="name" baru pada elemen atau kolom yang terdampak tersebut.
Kemudian, class="name" atau id="name" tersebut akan kita gunakan sebagai selektor css yang baru, berikut ini contoh lengkapnya.
Markup Table
<table>
<thead>
<tr>
<th rowspan="2">Nama</th>
<th colspan="2">Jenis Kelamin</th>
<th rowspan="2">Alamat</th>
</tr>
<tr>
<th class="colsub">Laki-Laki</th>
<th class="colsub">Perempuan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aji Pangestu</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Alwan</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Efa Nur Aniyatun</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Farida Zakiyatul Munawaroh</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Fuadin Alhidayah</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4" colspan="2" class="im-is">Saya adalah contoh rowspan="4" dan colspan="2".</td>
<td class="selectme">P</td>
<td></td>
</tr>
<tr>
<td class="selectme">P</td>
<td></td>
</tr>
<tr>
<td class="selectme">P</td>
<td></td>
</tr>
<tr>
<td class="selectme">P</td>
<td></td>
</tr>
<tr>
<td>Imroatun Nafiah</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Isma Rahmawati</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Kode CSS
table{width:100%;box-sizing:border-box;margin:10px 0;border-collapse:collapse}
table tbody td,table thead th{box-sizing:border-box;padding:2px 15px;border:1px solid rgba(41,41,42,1);text-align:left;vertical-align:middle;}
table thead th{width:33.3%;background-color:#a7abd1;}
table tbody td{width:25%;vertical-align:baseline;}
table th:nth-child(2){text-align:center;}
table tbody td:nth-child(2),table tbody td:nth-child(3){width:8%;}
.im-is{background-color:#a7abd1;color:#ffffff;min-width:215px;vertical-align:middle;}
.colsub{width:8%;text-align:center;}
.selectme{width:8%;}
Cordial Table Demo
|
Nama
|
Jenis Kelamin
|
Alamat
|
|
|---|---|---|---|
|
Laki-Laki
|
Perempuan
|
||
|
Aji Pangestu
|
|
|
|
|
Alwan
|
|
|
|
|
Efa Nur Aniyatun
|
|
|
|
|
Farida Zakiyatul Munawaroh
|
|
|
|
|
Fuadin Alhidayah
|
|
|
|
|
Saya adalah contoh rowspan=”4” dan colspan=”2”
|
|
|
|
|
|
|
||
|
|
|
||
|
|
|
||
|
Imroatun Nafiah
|
|
|
|
|
Isma Rahmawati
|
|
|
|
Anda mungkin tertarik artikel ini :
Terima kasih telah membaca artikel kami yang berjudul: Cara Mudah Menggabungkan Tabel fungsi Marge Cell, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.