Cara menggunakan rowspan dan colspan 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 . 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.



  
    Menggabungkan sel tabel dengan rowspan
  
  
   
Ini cuma 1 baris Ini baris 1 di kolom sebelahnya
Ini baris 2 di kolom sebelahnya
Ini baris 3 di kolom sebelahnya

Dan seperti ini jadinya.

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 di baris pertama. Seperti ini kode HTMLnya.



  
    Menggabungkan sel tabel dengan rowspan
  
  
    
Ini baris pertama, cuma 1 kolom
baris 2, kolom 1 baris 2, kolom 3 baris 2, kolom 3

Seperti ini jadinya.

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.

29/06/2020    Risman Hakim    20897    Website

Mempelajari Fungsi Colspan dan Rowspan pada Tabel - Jika kalian mempelajari HTML tentu kalian akan menemukan table yang merupakan bagian dari dokumen HTML dimana dahulu ketika layout halaman sebelum adanya CSS table digunakan untuk mengatur tata letak. Kemudian ada bagian yang sering sekali berhubungan dengan tabel yakni atribut colspan dan rowspan, apa kalian tahu fungsi kedua atribut tersebut ? Nah, bagi kalian yang ingin tau lebih dari masing - masing atribut colspan dan rowspan, berikut akan saya jelaskan Fungsi Colspan dan Rowspan pada Tabel.

Colspan atau column span merupakan atribute HTML yang berfungsi untuk menggabungkan beberapa kolom, sederhananya menggabungkan kolom ke samping.
Rowspan merupakan atribut HTML yang fungsi utamanya adalah menggabungkan beberapa baris, sederhananya menggabungkan baris ke bawah.

Agar lebih jelas dalam Mempelajari Fungsi Colspan dan Rowspan pada Tabel akan saya praktekan bagaimana penggunaan dari kedua atribut tersebut.

Kalian bisa buat satu file HTML kemudian kalian ketikan sintak HTML untuk membuat table dan beberapa kolom seperti berikut.


    


        
            
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
1234
567
8910
111213

Dari sintak diatas ada penggunaan atribut yang bisa kalian lihat pada kolom no 5 adalah atribut colspan dimana nilai atribut colspan adalah dua yang artinya menggabungkan sebanyak 2 kolom ke samping. kemudian pada kolom 7 penggunaan atribut rowspan dengan nilai rowspan 3 yang artinya menggabungkan sebanyak 3 baris kebawah.

Penggunaan kedua atribut tersebut sangatlah mudah, tinggal dilihat kolom dan baris saja yang ingin digabungkan, apakah ke samping atau kebawah.

Semoga dengan pembahasan dan tutorial diatas bisa membuat kalian lebih faham lagi dengan fungsi dan penggunaan atribut colspan dan rowspan. Cukup sekian artikel dumetschool kali ini semoga bermanfaat dan tetap semangat belajar

No data.

Apa itu rowspan dan colspan?

Atribut rowspan digunakan untuk menggabungkan baris pada tabel. Atribut colspan digunakan untuk menggabungkan kolom pada tabel.

Apa perbedaan atribut colspan dan rowspan?

colspan berfungsi untuk menggabungkan kolom secara horizontal atau ke samping. rowspan berfungsi menggabungkan kolom secara vertikal atau ke bawah.

Apa atribut untuk menggabungkan kolom?

digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN.

Langkah langkah membuat tabel HTML?

Cara Membuat Tabel di HTML – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel. – berfungsi untuk membungkus kepala tabel. – berfungsi untuk membungkus tubuh tabel. – berfungsi untuk membuat baris tabel, singkatan dari Table Row.

Bài mới nhất

Chủ Đề