Perbedaan Colspan dan Rowspan di HTML

Dalam mempelajari tabel HTML, Anda perlu tahu perbedaan colspan dan rowspan. Kedua atribut tersebut merupakan atribut pelengkap untuk membuat tabel di HTML.

Walaupun sama-sama berguna untuk pembuatan tabel, tetapi keduanya memiliki fungsi yang berbeda. Pada intinya, kedua atribut tersebut digunakan untuk menggabungkan sel atau kolom tabel HTML. Berikut pembahasan selengkapnya.

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>

Seperti ini jadinya.

colspan dan rowspan

Perbedaan colspan dan rowspan

Setelah kita mengetahui fungsi masing-masing atribut, colspan dan rowspan, kita bisa menyimpulkan apa perbedaan di antara keduanya. Namun ada satu kesamaan, yaitu sama-sama berfungsi untuk menggabungkan sel/kolom pada tabel HTML.

Sementara itu, perbedaan colspan dan rowspan terletak pada arah sel atau kolom yang digabungkan. colspan berfungsi untuk menggabungkan kolom secara horizontal atau ke samping. rowspan berfungsi menggabungkan kolom secara vertikal atau ke bawah.

Bagaimana dengan penjelasan dua atribut tabel HTML di atas? Semoga mudah dipahami ya. Sekian pembahasan kali ini dan semoga bisa bermanfaat untuk Anda.

Leave a Comment