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

Perbedaan Atribut Rowspan dan Colspan di HTML

Oleh AneIqbal Posting Komentar
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

Posting Komentar untuk "Perbedaan Atribut Rowspan dan Colspan di HTML"

Silakan berkomentar dengan kalimat yang bijak.