Apa itu Atribut 'rowspan' dan Bagaimana Menggunakan Elemen 'td' di HTML?

Dalam HTML, ' bentang baris ” adalah atribut yang dapat digunakan saat membuat tabel. Ini biasanya digunakan untuk menggabungkan beberapa sel yang berdekatan dalam arah vertikal. Ini dapat digunakan untuk membuat desain tabel yang rumit sambil menambahkan minat visual bagi pengguna. Dengan menggunakannya, pengembang dapat mengurangi kode HTML dan meningkatkan keterbacaan tabel. Selain itu, atribut “rowspan” dapat membantu mengatur tabel dengan mengelompokkan banyak sel.

Panduan ini menunjukkan apa itu atribut 'rowspan' dan bagaimana menggunakannya dengan elemen 'td'.

Apa itu Atribut “rowspan”?

Atribut 'rowspan' digunakan untuk menggabungkan beberapa sel dalam arah vertikal. Itu dapat diakses sebagai ' bentang baris = nilai ', Dimana ' nilai ” adalah jumlah baris yang perlu digabungkan dalam arah vertikal. Ini bermanfaat untuk meningkatkan keterbacaan pengguna dan menampilkan data kompleks dengan cara yang lebih menarik bagi pengguna.

Apa itu Elemen 'td'?

“ td ” atau elemen data tabel digunakan untuk mendefinisikan sel dalam tabel HTML. Sebagian besar digunakan bersama dengan elemen HTML tabel lainnya seperti “”, “”, “

untuk membuat konten tabel. Itu juga dapat digunakan dengan atribut seperti 'colspan' dan 'rowspan' untuk menambahkan fitur desain tambahan, mengurangi kerumitan dan meningkatkan faktor keterbacaan, dll. Ini digunakan dalam file HTML menggunakan ' ” tag yang menyisipkan baris dalam tabel dan memanfaatkan “

” tag.

Bagaimana Cara Menggunakan Atribut “rowspan” Dengan Elemen “td”?

Untuk demonstrasi yang lebih baik tentang hubungan antara atribut 'rowspan' dan elemen 'td'. Mari kita telusuri contoh praktis dengan mengikuti panduan langkah demi langkah di bawah ini:

Langkah 1: Pembuatan Tabel dalam HTML

Pertama, buat tabel dengan bantuan tombol “ ” tag. Di dalamnya tambahkan beberapa '

” tag untuk membuat sel:

< gaya >

meja{

perbatasan-runtuh:runtuh;

margin: 40px;

}

th,td{

border:2px merah pekat;

padding: 20px;

}

< / gaya >

< / kepala >

< tubuh >

< meja >

< tr >

< th > emp.id < / th >

< th > nama karyawan < / th >

< th > Gaji < / th >

< / tr >

< tr >

< td > 1 < / td >

< td > Yohanes < / td >

< td > 160.000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Yusuf < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Angela < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > Kirmizi < / td >

< td > 80.000 < / td >

< / tr >

< / meja >

< / tubuh >

Dalam cuplikan kode di atas:

Pertama, lima baris telah dibuat dan beberapa data dummy disediakan untuk setiap sel.
Selanjutnya, “ meja elemen ” dipilih dan atur “ runtuh ' nilai ke CSS ' perbatasan-runtuh ' Properti.
Setelah itu, “ berbatasan ' Dan ' lapisan ” properti digunakan untuk meningkatkan visibilitas pengguna dan menciptakan efek yang menarik bagi pengguna.

Setelah eksekusi kode, tabel muncul seperti ini:

Output di atas menampilkan bahwa tabel dibuat dan diberi gaya.

Langkah 2: Menggunakan Atribut “rowspan” dengan Elemen “td”.

“ bentang baris ” atribut menggabungkan sel yang berdekatan dalam arah vertikal. Ini digunakan dengan '

” elemen/tag. Atribut mengambil angka sebagai nilai dan memberi tahu berapa banyak sel yang digabungkan dalam arah vertikal. Sel terdekat yang akan datang harus memiliki satu sel lebih sedikit, dan ruang itu diisi oleh atribut 'rowspan' seperti yang ditunjukkan di bawah ini:

< tubuh >

< meja >

< tr >

< th >Emp.id< / th >

< th >Nama Karyawan< / th >

< th >Gaji< / th >

< / tr >

< tr >

< td > 1 < / td >

< td >Yohanes< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Joseph< / td >

< td bentang baris = '2' > 120 ,000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angela< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >merah tua< / td >

< td > 80 ,000< / td >

< / tr >

< / meja >

< / tubuh >

Dalam kode di atas:

'Rentang baris' dilampirkan dengan karyawan yang memiliki ' Gaji ” td elemen.
Nilai dari ' 2 ” disediakan untuk atribut “rowspan” yang menyetel data yang sama di kedua sel yang berdekatan seperti yang ditunjukkan di bawah ini:

Keluarannya mengilustrasikan bahwa kedua sel digabungkan dan keterbacaan untuk pengguna kini ditingkatkan.

Kesimpulan

“ bentang baris ” atribut bekerja dengan “ td ” elemen untuk menggabungkan beberapa sel yang berdekatan dalam arah vertikal. Atribut mengambil angka sebagai nilai dan memberi tahu berapa banyak sel yang digabungkan. Ini digunakan di mana data yang sama disediakan untuk banyak sel. Blog ini telah mendemonstrasikan apa itu 'rowspan' dan bagaimana menggunakannya dengan elemen 'td' di HTML.

Apa itu Atribut 'rowspan' dan Bagaimana Menggunakan Elemen 'td' di HTML?