Rowspan dan Colspan, Belajar HTML Table Part 2

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.

Daftar Isi Halaman

Definisi Dan Fungsi
Contoh Penggunaan
Pengaturan CSS
Demo Rowspan Colspan

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.

Contoh Penggunaan Rowspan dan Colspan

#Contoh 1

Berikut ini adalah contoh penggunaan rowspan dan colspan pada kolom (column) header yaitu tag <th>. [ads id="ads1"]

<table>
  <thead>
    <tr> <th rowspan="2">Name</th> <th colspan="2">Gender</th> <th rowspan="2">City</th> </tr>
    <tr> <th>M</th> <th>F</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.

Name	Gender	City
M	F

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.

Name	Gender		City
Name	M	F	City

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 2

Berikut adalah contoh penggunaan atribut colspan pada kolom (column) body yaitu tag <td>.

<table>
  <thead>
    <tr> <th rowspan="2">Name</th> <th colspan="2">Gender</th> <th rowspan="2">City</th> </tr>
    <tr> <th>M</th> <th>F</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 : Mayoriats 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.

Table Preview

Name	Gender		City
Name	M	F	City





Saya adalah colspan="3".

#Contoh 3

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 class="preview-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 (preview).

Table Preview

Saya adalah rowspan="4"

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">Name</th><th colspan="2">Gender</th><th rowspan="2">City</th></tr>
    <tr><th class="colsub">M</th><th class="colsub">F</th></tr>
  </thead>
  <tbody>
    <tr>  <td>Roman</td>  <td></td>  <td></td>  <td></td>  </tr>
    <tr>  <td>Rere</td>   <td></td>  <td></td>  <td></td>  </tr>
    <tr>  <td>Reina</td>  <td></td>  <td></td>  <td></td>  </tr>
    <tr>  <td>Rico</td>   <td></td>  <td></td>  <td></td>  </tr>
    <tr>  <td>Rocky</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">F</td>  <td></td> </tr>
    <tr>  <td class="selectme">F</td>  <td></td>  </tr>
    <tr>  <td class="selectme">F</td>  <td></td>  </tr>
    <tr>  <td class="selectme">F</td>  <td></td>  </tr>
    <tr>  <td>Riana</td>  <td></td>  <td></td>  <td></td>  </tr>
    <tr>  <td>Riany</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

Name	Gender		City
Name	M	F	City
Roman
Rere
Reina
Rico
Rocky
Saya adalah contoh rowspan ="4" dan colspan="2".



Riana
Riany