Membuat tabel html colspan rowspan

Berikut ini contoh penggunaan atribut rowspan untuk menggabungkan beberapa baris pada suatu tabel :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19



   Latihan Menggunakan Atribut Rowspan Pada Tabel


   

Belajar Menggunakan Atribut Rowspan Pada Tabel


   

Daftar Nilai Mata Pelajaran Matematika


   

Jika Anda bingung bagaimana tata letak tabel bekerja, mereka pada dasarnya mulai dari x = 0, y = 0 dan bekerja dengan cara mereka. Mari kita jelaskan dengan grafik, karena mereka sangat menyenangkan!

Saat Anda memulai tabel, Anda membuat kotak. Baris dan sel pertama Anda akan berada di sudut kiri atas. Anggap saja seperti pointer array, bergerak ke kanan dengan setiap nilai x yang bertambah, dan bergerak ke bawah dengan setiap nilai y yang bertambah.

Untuk baris pertama Anda, Anda hanya mendefinisikan dua sel. Satu bentang 2 baris ke bawah dan satu bentang 4 kolom. Jadi ketika Anda mencapai akhir baris pertama Anda, itu terlihat seperti ini:

Membuat tabel html colspan rowspan

Sekarang setelah baris telah berakhir, "array pointer" melompat ke baris berikutnya. Karena x posisi 0 sudah diambil oleh sel sebelumnya, x melompat ke posisi 1 untuk mulai mengisi sel. * Lihat catatan tentang perbedaan antara rowspans.

Baris ini memiliki empat sel di dalamnya yang semuanya blok 1x1, mengisi lebar yang sama dari baris di atasnya.

Membuat tabel html colspan rowspan

Baris berikutnya adalah semua sel 1x1. Tetapi, misalnya, bagaimana jika Anda menambahkan sel ekstra? Yah, itu hanya akan keluar dari Edge ke kanan.

Membuat tabel html colspan rowspan

* Tapi bagaimana jika kita bukannya (daripada menambahkan sel ekstra) membuat semua sel ini memiliki rowspan 2? Hal yang perlu Anda pertimbangkan di sini adalah bahwa meskipun Anda tidak akan menambahkan lagi sel di baris berikutnya, baris tersebut masih harus ada (meskipun itu baris kosong). Jika Anda memang mencoba untuk menambahkan sel baru di baris segera setelah itu, Anda akan melihat bahwa itu akan mulai menambahkan mereka ke akhir baris bawah.

Membuat tabel html colspan rowspan

Nikmati dunia indah menciptakan tabel!

HTML atribut rowspan merupakan atribut pada element HTML tabel yang digunakan untuk menggabungkan dua buah atau lebih kelompok baris pada data tabel menjadi satu. Row (baris) merupakan deretan sel pada tabel yang mempunyai arah membujur ke kanan dan kiri atau sebaliknya (horizontal). Penggabungan ini berguna untuk menggabungkan (merger) suatu tabel header atau tabel data saat terdapat data tabel yang mempunyai kesamaan kriteria. Penggabungan ini biasanya dilakukan pada bagian judul yang mempunyai baris anakkan disampingnya.

Hasil penggabungan suatu tabel header ataupun tabel data akan mendapatkan sebuah tabel sel baru dengan ukuran tinggi yang sama dengan jumlah ukuran tinggi baris yang berhasil digabungkan. Penggabungkan beberapa buah baris dapat dilakukan dengan menuliskan nilai atribut rowspan="jumlah baris".

Rowspan (penggabungan baris) pada tabel :

Membuat tabel html colspan rowspan

Susunan tabel pada HTML :

Membuat tabel html colspan rowspan

Penulisan Syntax:

rowspan="jumlah baris">Konten
rowspan="jumlah baris">Konten


     
     
     
     
     
     
     
   
KategoriNo.Nama SiswaNilai
Murid Laki-laki1.Farel9
2.Antonio9
3.Steven8
Murid Perempuan1.Victoria9
2.Sarah9
3.Veronika8



Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

Membuat tabel html colspan rowspan

Jika diperhatikan pada hasil di atas, pada kolom kategori terdapat 3 buah baris sel yang sudah dirangkap/dimerger menjadi satu. Sebelum dilakukan penggabungan, terdapat 3 buah sel kemudian menghasilkan 1 buah sel karena proses merger dengan memberikan atribut rowspan="3". Sel hasil merger tersebut digunakan sebagai judul pada kategori untuk Murid Laki-laki dan Murid Perempuan.

Browser Pendukung :

Membuat tabel html colspan rowspan
Catatan : Sebelum adanya penataan gaya dengan CSS, tag digunakan untuk mendesain kerangka halaman web. Hal ini dapat dilakukan dengan mudah melalui penetapan atribut ataupun untuk mendapatkan susunan rangka halaman web tersebut. Anda seharusnya tidak menerapkan cara ini, silahkan menggunakan CSS sebagai penggantinya.

Membuat tabel html colspan rowspan
28 Jul 2022

Apa itu rowspan dan colspan?

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

Langkah langkah membuat tabel di HTML?

Cara Membuat Tabel di HTML <table> – 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.

Atribut yang digunakan untuk menggabungkan sel tabel adalah colspan apa fungsi dari 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.

Apa atribut untuk menggabungkan baris?

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