Atribut yang digunakan untuk menggabungkan beberapa kolom dalam sebuah tabel

Beranda
»
HTML
»
Atribut Rowspan Pada Tabel

HTML atribut rowspan merupakan atribut pada element HTML tabel yang digunakan untuk menggabungkan dua buah atau lebih kelompok baris pada data tabel menjadi satu. Row (baris) merupakan deretan sel pada tabel yang mempunyai arah membujur ke kanan dan kiri atau sebaliknya (horizontal). Penggabungan ini berguna untuk menggabungkan (merger) suatu tabel header atau tabel data saat terdapat data tabel yang mempunyai kesamaan kriteria. Penggabungan ini biasanya dilakukan pada bagian judul yang mempunyai baris anakkan disampingnya.

Hasil penggabungan suatu tabel header ataupun tabel data akan mendapatkan sebuah tabel sel baru dengan ukuran tinggi yang sama dengan jumlah ukuran tinggi baris yang berhasil digabungkan. Penggabungkan beberapa buah baris dapat dilakukan dengan menuliskan nilai atribut rowspan="jumlah baris".

Rowspan (penggabungan baris) pada tabel :

Susunan tabel pada HTML :

Penulisan Syntax:

<th rowspan="jumlah baris">Konten</th>
<td rowspan="jumlah baris">Konten</td>

Berikut ini contoh penggunaan atribut rowspan untuk menggabungkan beberapa baris pada suatu tabel :

123456789101112131415161718

<!DOCTYPE html><html><head> <title>Latihan Menggunakan Atribut Rowspan Pada Tabel</title></head><body> <h1>Belajar Menggunakan Atribut Rowspan Pada Tabel</h1> <p>Daftar Nilai Mata Pelajaran Matematika</p> <table border="1"> <tr><th>Kategori</th><th>No.</th><th>Nama Siswa</th><th>Nilai</th></tr> <tr><td rowspan="3">Murid Laki-laki</td><td>1.</td><td>Farel</td><td>9</td></tr> <tr><td>2.</td><td>Antonio</td><td>9</td></tr> <tr><td>3.</td><td>Steven</td><td>8</td></tr> <tr><td rowspan="3">Murid Perempuan</td><td>1.</td><td>Victoria</td><td>9</td></tr> <tr><td>2.</td><td>Sarah</td><td>9</td></tr> <tr><td>3.</td><td>Veronika</td><td>8</td></tr> </table></body></html>

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

Jika diperhatikan pada hasil di atas, pada kolom kategori terdapat 3 buah baris sel yang sudah dirangkap/dimerger menjadi satu. Sebelum dilakukan penggabungan, terdapat 3 buah sel kemudian menghasilkan 1 buah sel karena proses merger dengan memberikan atribut rowspan="3". Sel hasil merger tersebut digunakan sebagai judul pada kategori untuk Murid Laki-laki dan Murid Perempuan.

Browser Pendukung :

Atribut
<rowspan>	ya	ya	ya	ya	ya

Catatan : Sebelum adanya penataan gaya dengan CSS, tag <table> digunakan untuk mendesain kerangka halaman web. Hal ini dapat dilakukan dengan mudah melalui penetapan atribut <colspan> ataupun <rowspan> untuk mendapatkan susunan rangka halaman web tersebut. Anda seharusnya tidak menerapkan cara ini, silahkan menggunakan CSS sebagai penggantinya.

28 Jul 2022

Atribut colspan merupakan atribut pada tabel yang digunakan untuk menggabungkan dua buah atau lebih kolom menjadi satu buah kolom. Kolom merupakan deretan sel pada tabel yang mempunyai arah membujur ke atas dan ke bawah (vertikal). Penggabungan / merger beberapa buah kolom biasanya digunakan jika suatu kolom untuk judul yang mempunyai sub-sub kolom dibawahnya.

HTML tag element <TH> (table header) merupakan element HTML pada tabel yang paling sering dilakukan penggabungan dari beberapa kolom menjadi satu buah kolom saja. Namun pada dasarnya semua kolom pada elemen <td> (table data) dapat dilakukan penggabungan / merger.

Colspan (penggabungan kolom) pada tabel :

Susunan tabel pada HTML :

Suatu kolom yang diperoleh dari hasil proses penggabungan beberapa kolom pada tabel pada dasarnya merupakan satu buah kolom saja. Tampilan kolom hasil penggabungan akan menyesuaikan dengan jumlah keseluruhan lebar kolom asal penggabungan. Kolom yang digabung dapat berisi 2 buah kolom, 3 kolom dan seterusnya. Untuk menggabungkan 2 buah kolom menjadi 1 kolom, dibuat dengan menuliskan attribut colspan="jumlah kolom".

Penulisan Syntax:

<th colspan="jumlah kolom">Konten</th>
<td colspan="jumlah kolom">Konten</td>

Contoh berikut merupakan penggabungan beberapa kolom pada tabel menjadi satu dengan menggunakan atribut colspan :

1234567891011121314151617

<!DOCTYPE html><html><head> <title>Latihan Menggunakan Atribut Colspan Pada Tabel</title></head><body> <h1>Belajar Menggunakan Atribut Colspan Pada Tabel</h1> <table border='1'> <tr><th>No.</th><th width="154">Pelajaran</th><th colspan="3" width="154">Nilai</th></tr> <tr><td>1.</td><td>Matematika</td><td>A</td><td>B</td><td>C</td></tr> <tr><td>2.</td><td>Bahasa Indonesia</td><td>v</td><td></td><td></td></tr> <tr><td>3.</td><td>Bahasa Inggris</td><td>v</td><td></td><td></td></tr> <tr><td>4.</td><td>Sejarah Dunia</td><td></td><td>v</td><td></td></tr> <tr><td>5.</td><td>Fisika</td><td></td><td>v</td><td></td></tr> <tr><td>6.</td><td>Kimia</td><td></td><td>v</td><td></td></tr> </table></body></html>

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

Perhatikan pada tabel yang dihasilkan, pada tabel data <td>, pada bagian "Nilai" diberikan atribut colspan dengan nilai colspan = "3". Ini artinya pada tabel data <td> tersebut terdapat 3 buah tabel data <td> yang akan digabungkan dan dijadikan satu buah kolom saja. Dari hasil dari penggabungan tersebut, lebar dari tabel data <td> akan menyesuaikan dengan lebar 3 buah kolom yang ada di bawahnya.

Browser Pendukung :