“rowspan” Özniteliği Nedir ve HTML'de “td” Öğesiyle Nasıl Kullanılır?

HTML'de ' satır aralığı ” tablo yapılırken kullanılabilecek bir özelliktir. Genellikle birden çok bitişik hücreyi dikey yönde birleştirmek için kullanılır. Kullanıcı için görsel ilgi eklerken karmaşık tablo tasarımları oluşturmak için kullanılabilir. Geliştirici bunu kullanarak HTML kodunu azaltabilir ve tablonun okunabilirliğini geliştirebilir. Ayrıca, 'rowspan' özelliği, birden çok hücreyi gruplandırarak bir tablo düzenlemeye yardımcı olabilir.

Bu kılavuz, 'rowspan' özniteliğinin ne olduğunu ve 'td' öğesiyle nasıl kullanılacağını gösterir.

“rowspan” Özniteliği nedir?

Birden çok hücreyi dikey yönde birleştirmek için “rowspan” özelliği kullanılır. “ olarak erişilebilir. satır aralığı = değer ', nerede ' değer ”, dikey yönde birleştirilmesi gereken satır sayısıdır. Kullanıcının okunabilirliğini artırmak ve karmaşık verileri daha kullanıcı çekici bir şekilde görüntülemek için faydalıdır.

“td” Elemanı nedir?

“ td ” veya tablo veri öğesi, bir HTML tablosu içindeki bir hücreyi tanımlamak için kullanılır. Tablo içeriği oluşturmak için çoğunlukla “”, “”, “

gibi diğer tablo HTML öğeleriyle birlikte kullanılır. Ekstra tasarım özellikleri eklemek, karmaşıklığı azaltmak ve okunabilirlik faktörünü iyileştirmek vb. için 'colspan' ve 'rowspan' gibi özniteliklerle de kullanılabilir. HTML dosyasında ' Tablodaki satırları ekleyen ve '

' etiket.

“td” Elemanı ile “rowspan” Niteliği Nasıl Kullanılır?

'rowspan' niteliği ile 'td' öğesi arasındaki ilişkinin daha iyi gösterilmesi için. Aşağıdaki adım adım kılavuzu izleyerek pratik bir örnek üzerinden gidelim:

Adım 1: HTML'de Tablo Oluşturma

İlk olarak, “ yardımıyla bir tablo oluşturun. ' etiket. İçine birden fazla “ ekleyin

Hücre oluşturmak için ” etiketi:

< stil >

masa{

kenarlık daraltma: daraltma;

kenar boşluğu: 40 piksel;

}

inci, td{

kenarlık: 2 piksel sabit kırmızı;

dolgu: 20 piksel;

}

< / stil >

< / KAFA >

< vücut >

< masa >

< tr >

< inci > emp.id < / inci >

< inci > Çalışan Adı < / inci >

< inci > Maaş < / inci >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / 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 > kırmızı < / td >

< td > 80.000 < / td >

< / tr >

< / masa >

< / vücut >

Yukarıdaki kod parçacığında:

İlk olarak, beş satır oluşturuldu ve her hücreye bazı sahte veriler sağlandı.
Sonra, “ masa ” öğesi seçilir ve “ yıkılmak ' CSS değeri ' sınır çöküşü ' mülk.
Bundan sonra “ sınır ' Ve ' dolgu malzemesi ” özellikleri, kullanıcı görünürlüğünü artırmak ve kullanıcıyı cezbeden bir etki yaratmak için kullanılır.

Kodun yürütülmesinden sonra tablo şöyle görünür:

Yukarıdaki çıktı, tablonun oluşturulduğunu ve biçimlendirildiğini gösterir.

Adım 2: “td” Elemanı ile “rowspan” Niteliğini Kullanma

“ satır aralığı ” özelliği bitişik hücreleri dikey yönde birleştirir. “” ile kullanılır.

” öğe/etiket. Nitelik, bir sayıyı değer olarak alır ve dikey yönde kaç hücrenin birleştirileceğini söyler. Yaklaşan bitişik hücrede bir hücre daha az olmalıdır ve bu boşluk, aşağıda gösterildiği gibi 'rowspan' özelliği tarafından doldurulur:

< vücut >

< masa >

< tr >

< inci >Emp.kimliği< / inci >

< inci >Çalışan Adı< / inci >

< inci >maaş< / inci >

< / tr >

< tr >

< td > 1 < / td >

< td >John< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Yusuf< / td >

< td satır aralığı = '2' > 120 ,000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angela< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >kızıl< / td >

< td > 80 ,000< / td >

< / tr >

< / masa >

< / vücut >

Yukarıdaki kodda:

'Sıra aralığı', çalışanın ' Maaş ”td öğesi.
Değeri ' 2 ”, aşağıda gösterildiği gibi her iki bitişik hücrede aynı verileri ayarlayan “rowspan” özelliğine sağlanır:

Çıktı, iki hücrenin birleştirildiğini ve kullanıcı için okunabilirliğin artık geliştirildiğini göstermektedir.

Çözüm

“ satır aralığı ” özniteliği “ ile çalışır td Birden çok bitişik hücreyi dikey yönde birleştirmek için öğe. Nitelik, bir sayıyı değer olarak alır ve kaç hücrenin birleştirileceğini söyler. Aynı verilerin birden fazla hücreye sağlandığı durumlarda kullanılır. Bu blog, 'rowspan'ın ne olduğunu ve HTML'deki 'td' öğesiyle nasıl kullanılacağını gösterdi.

“rowspan” Özniteliği Nedir ve HTML'de “td” Öğesiyle Nasıl Kullanılır?