Cara Merge Cells Tabel

Dipublikasikan oleh Muhammad Zen pada

Halo teman-teman semua. apa kabar?. semoga dalam keadaan sehat dan bahagia. Kali ini kita akan membahas cara merge cells tabel. Jika kamu belum mengikuti materi sebelumnya, silahkan kunjungi halaman kursus.

Merge Cells Tabel

Merge cells tabel adalah menggabungkan dua atau lebih cell menjadi satu. Jika menggunakan Excel maka cara nya cukup mudah. Namun di html proses ini dilakukan pada kode html.

Sekarang kita akan membahas merge cell pada html. Merge cells pada html dibagi menjadi dua. Yaitu menggabungkan secara kolom (colspan), dan secara baris (rowspan). Sebelumnya, mari kita lihat sebuah tabel normal.

<table border="1" cellspacing="0" cellpadding="10" align="center">
  <tr>
    <td>1,1</td><td>1,2</td><td>1,3</td>
  </tr>
  <tr>
    <td>2,1</td><td>2,2</td><td>2,3</td>
  </tr>
  <tr>
    <td>3,1</td><td>3,2</td><td>3,3</td>
  </tr>
</table>

Jika kode dijalankan maka terlihat tabel 3×3. Pada tabel normal tersebut bisa dilakukan merge cells. Dan tag yang diatur atributnya adalah tag <td>. Sedangkan atribut yang digunakan adalah colspan dan rowspan.

Atribut Tag <td>

Merge cell ini hanya beraku untuk tag <td> saja. Jadi, kamu fokus di tag <td>.

  • colspan
  • rowspan

Menggabungkan Cell Secara Kolom (colspan)

Sekarang kita akan menggabungkan cell secara kolom menggunakan atribut colspan. Contoh kasus menggunakan tabel 3×3.

<table border="1" cellspacing="0" cellpadding="10" align="center">
  <tr>
    <td>1,1</td><td>1,2</td><td>1,3</td>
  </tr>
  <tr>
    <td>2,1</td><td colspan="2" bgcolor="#ccddcc">colspan 2 cell(2,2;2,3)</td><!--td>2,3 hilang</td-->
  </tr>
  <tr>
    <td colspan="3" bgcolor="#ccddcc">colspan 3 cell(3,1;3,2;3,3)</td><!--td>3,2 hilang</td><td>3,3 hilang</td-->
  </tr>
</table>

Nah, kalau kamu menggabungkan cell, artinya ada cell lain yang dihilangkan. Jika dua cell gabung, maka satu <td></td> hilang. Jika tiga cell gabung, maka dua <td></td> hilang dan seterusnya.

Menggabungkan Cell Secara Baris(rowspan)

Selanjutnya kita lihat contoh menggabungkan cell secara baris.

<table border="1" cellspacing="0" cellpadding="10" align="center">
  <tr>
    <td>1,1</td><td rowspan="2" bgcolor="#ccddcc">rowspan cell (1,2;2,2)</td><td>1,3</td>
  </tr>
  <tr>
    <td>2,1</td><!--td>2,2 hilang</td--><td>2,3</td>
  </tr>
  <tr>
    <td>3,1</td><td>3,2</td><td>3,3</td>
  </tr>
</table>

Dapat dilihat pada kode di atas. ada tag <td></td> yang harus dihangkan. Jika pada rowspan yang hilang sebelah kanan. Sedangkan pada rowspan yang hilang sebelah bawah.

Tugas Membuat Merge Cell

Untuk memahami. kerjakan tugas berikut.

Cara Merge Cells Tabel

Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.

Kategori: HTML

0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *