Tutorial Tabel HTML Part 2: Cara Menggabungkan Sel Tabel (atribut rowspan dan colspan)

Untuk tampilan tabel, kadang kita butuh membuat tabel dengan jumlah kolom yang berbeda antara baris pertama dan baris lainnya, atau menggabungkan sebuah sel tabel dengan sel lainnya. Untuk keperluan ini, HTML menyediakan atribut rowspan dan colspan. Dalam tutorial cara menggabungkan sel Tabel HTML ini, kita akan mempelajari cara penggunaannya.


Fungsi Atribut Rowspan and Colspan

Atribut rowspan and colspan digunakan untuk membuat sel tabel 'bersatu' dengan sel yang lain. Atribut ini diletakkan pada tag td dari sebuah tabel. Agar mudah memahami, langsung saja kita buat contoh kode HTMLnya.

Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelspan.html

Contoh penggunaan atribut rowspan and colspan:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan </h1>
<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td colspan="2" >Baris 2, Kolom 2 & 3</td>
    </tr>
    <tr>
        <td rowspan="2"> Baris 3 & 4, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Dalam contoh diatas, kita dapat melihat bahwa tag td yang memiliki atribut colspan, akan membuat sel tabel bersatu dengan kolom disebelahnya. Sedangkan atribut rowspan akan membuat sel tabel bersatu dengan baris dibawahnya. Kedua atribut ini membutuhkan nilai (value), dimana nilai ini adalah seberapa banyak sel tabel yang dibuat 'bersatu'.

Misalkan colspan='3' akan membuat 3 kolom bergabung menjadi 1 sel, dan rowspan='2' akan membuat sel tabel bersatu dengan 1 baris dibawahnya.

Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel

Dalam membuat tabel dengan atribut rowspan dan clospan, anda sebaiknya telah mengkalkulasi seberapa besar tabel yang akan dibuat, karena dengan semakin kompleks tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut.

Untuk tutorial pembuatan tabel HTML berikutnya, kita akan membahas tentang tag th yang digunakan untuk membuat kolom header, atau judul kolom di dalam tabel HTML di dalam Tutorial Tabel HTML: Cara Membuat Kolom Header Untuk Tabel (tag th).

16 Comments

  1. Egita
    09 Oct 14
  2. karimunjawa
    04 Nov 15
  3. David
    21 Nov 15
  4. Fahri
    16 Jan 17
  5. Hamba Allah
    19 Mar 18
  6. arenaprinter
    15 Nov 18
    • Andre
      16 Nov 18
      • D364
        24 Mar 20
    • Anonymous
      18 Sep 23
  7. Kidu
    29 Sep 19
    • Andre
      29 Sep 19
  8. karimunjawa
    20 Jan 20
  9. D364
    24 Mar 20
  10. oscar11
    25 Jan 21
  11. Hikam
    14 Mar 21
    • Andre
      14 Mar 21

Add Comment

Leave a Reply to D364 Cancel reply