Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Koding

Perbedaan Atribut Rowspan dan Colspan di HTML

Setelah kita mempelajari atribut border, cellpadding, dan cellspacing di tabel HTML, selanjutnya kita akan membahas cara menggabungkan sel-sel yang ada di tabel HTML dengan atribut rowspan dan colspan.

perbedaan rowspan dan colspan


Fungsi atribut rowspan HTML

rowspan digunakan untuk menggabungkan beberapa sel tabel menjadi 1 secara vertikal. rowspan, jika diistilahkan mudahnya adalah 'berapa baris ke bawah yang akan digabungkan'.

Sebagai contoh, kita ingin membuat tabel yang terdiri dari 2 kolom, yang mana kedua kolom tersebut punya jumlah baris yang berbeda. Kolom 1-nya hanya memiliki 1 baris, sedangkan kolom 1-nya lagi memiliki 3 baris.

Bagaimana caranya? 

Caranya adalah dengan menambahkan atribut rowspan pada tag <td>. Misalnya atribut rowspan diisi dengan 4, maka sel tersebut akan menggabungkan diri dengan 3 baris dibawahnya, dihitung dari baris yang memiliki atribut rowspan.

Seperti ini kode HTMLnya.
<!DOCTYPE html>
<html>
  <head>
    <title>Menggabungkan sel tabel dengan rowspan</title>
  </head>
  <body>
   <table border="1" cellpadding="1" cellspacing="1">
    <tr>
      <td rowspan="4">Ini cuma 1 baris</td>
      <td>Ini baris 1 di kolom sebelahnya</td>
    </tr>
    <tr>
      <td>Ini baris 2 di kolom sebelahnya</td>
    <tr>
    <tr>
      <td>Ini baris 3 di kolom sebelahnya</td>
    <tr>
   </table>
  </body>
</html>

Dan seperti ini jadinya.


perbedaan rowspan dan colspan


Fungsi atribut colspan HTML

Atribut colspan digunakan untuk menggabungkan beberapa sel tabel menjadi 1 secara horizontal. colspan, jika diistilah mudahkan adalah 'berapa kolom ke samping yang akan digabungkan'.

Sebagai contoh, kita punya sebuah tabel dengan 2 baris. Baris pertama hanya memiliki 1 kolom, sedangkan baris kedua memiliki 3 kolom.

Kita tinggal menambakan atribut colspan="3" pada tag <td> di baris pertama. Seperti ini kode HTMLnya.
<!DOCTYPE html>
<html>
  <head>
    <title>Menggabungkan sel tabel dengan rowspan</title>
  </head>
  <body>
    <table border="1" cellpadding="1" cellspacing="1">
      <tr>
        <td colspan="3">Ini baris pertama, cuma 1 kolom</td>
      </tr>
      <tr>
        <td>baris 2, kolom 1</td>
        <td>baris 2, kolom 3</td>
        <td>baris 2, kolom 3</td>
      </tr>
    </table>
  </body>
</html>


Barangkali Anda tertarik baca:

Seperti ini jadinya.

perbedaan rowspan dan colspan

Begitulah caranya menggabungkan sel-sel tabel di HTML. Sekarang, kita sudah tau apa itu rowspan dan colspan. Jadi, sudah tau kan perbedaannya?

Selanjutnya >> Tutorial Tabel HTML: Cara Membuat Tabel Header Kolom di Tabel HTML

2 komentar untuk "Perbedaan Atribut Rowspan dan Colspan di HTML"

  1. Rismawati27 September 2018 19.48

    Akhirnya bisa tau perbedaan atribut rowspan dan colspan untuk menggabungkan sel tabel di html.
    Makasih infonya gan


    Kunjungi web kampus saya : Atma Luhur

    Kunjungi web saya : Rismawati

    BalasHapus

Silakan berkomentar dengan kalimat yang bijak.