Tutorial Tabel HTML Part 2: Cara Menggabungkan Sel Tabel (atribut rowspan dan colspan)

Untuk tampilan tabel, kadang kita butuh membuat tabel dengan jumlah kolom yang berbeda antara baris pertama dan baris lainnya, atau menggabungkan sebuah sel tabel dengan sel lainnya. Untuk keperluan ini, HTML menyediakan atribut rowspan dan colspan. Dalam tutorial cara menggabungkan sel Tabel HTML ini, kita akan mempelajari cara penggunaannya.

Fungsi Atribut Rowspan and Colspan

Atribut rowspan and colspan digunakan untuk membuat sel tabel ‘bersatu’ dengan sel yang lain. Atribut ini diletakkan pada tag td dari sebuah tabel. Agar mudah memahami, langsung saja kita buat contoh kode HTMLnya.
Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelspan.html

Contoh penggunaan atribut rowspan and colspan:
 

Dalam contoh diatas, kita dapat melihat bahwa tag td yang memiliki atribut colspan, akan membuat sel tabel bersatu dengan kolom disebelahnya. Sedangkan atribut rowspan akan membuat sel tabel bersatu dengan baris dibawahnya. Kedua atribut ini membutuhkan nilai (value), dimana nilai ini adalah seberapa banyak sel tabel yang dibuat ‘bersatu’.

Misalkan colspan=’3’ akan membuat 3 kolom bergabung menjadi 1 sel, dan rowspan=’2’ akan membuat sel tabel bersatu dengan 1 baris dibawahnya.

Dalam membuat tabel dengan atribut rowspan dan clospan, anda sebaiknya telah mengkalkulasi seberapa besar tabel yang akan dibuat, karena dengan semakin kompleks tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut.

Untuk tutorial pembuatan tabel HTML berikutnya, kita akan membahas tentang tag th yang digunakan untuk membuat kolom header, atau judul kolom di dalam tabel HTML