HTML öğelerini biçimlendirmek için birden çok CSS özelliği vardır. “ görüntülemek ” özelliği bunlardan biridir ve yönetilen öğeyi satır içi öğe veya blok öğe olarak ayarlamak için kullanılır. Ayrıca, akış, esnek veya ızgara gibi çocukları için kullanılan düzen. Ayrıca, bu özellik, bir öğeyi görüntülemek için iç ve dış türleri tahsis eder.
Bu gönderi şunları açıklayacaktır:
CSS'de “display:table-cell” Nasıl Kullanılır?
“ görüntülemek ' değeri olan özellik ' masa hücresi ”, verilen talimatları deneyin.
1. Adım: İç İçe div Konteynerleri Yapın
İlk olarak, “ yardımıyla ana div kapsayıcısını oluşturun. Ana div'e erişmek için ' #tablo içeriği ', Neresi ' # ”, belirtilen “ öğesine erişmek için kullanılan bir seçicidir. İD ” div kabının özniteliği. Ardından, aşağıdaki özellikleri uygulayın: 3. Adım: “tr-div” Kapsayıcısını Biçimlendirin Şimdi, “ tr-div ” konteyner aşağıdaki gibidir: Çıktı “ ekran: tablo hücresi ” CSS özelliği, öğenin bir tablo gibi davranmasını sağlayan verilere bir görüntü ayarlamak için kullanılır. Böylece kullanıcılar, tablo öğesini ve td ve tr dahil diğer öğeleri kullanmadan HTML'de bir tablonun kopyasını oluşturabilir. Daha spesifik olarak, özelliği verileri bir tablo biçiminde tanımlar. “ ekran: tablo hücresi ” CSS özelliği, iç içe div kapları oluşturun ve her kapsayıcıya belirli bir adla bir sınıf ekleyin. Ardından, CSS'de div kabına erişin ve 'display: table-cell' özelliğini uygulayın; burada ' görüntülemek ” özelliği tablo hücrelerindeki verileri ayarlamak için kullanılır. Bu gönderi, display:table-cell CSS özelliğini kullanma yöntemini gösterdi.
< div İD = 'tablo içeriği' >
< div sınıf = 'tr-div' >
< div sınıf = 'td-div' > Harry div >
< div sınıf = 'td-div' > html / CSS div >
div >
< div sınıf = 'tr-div' >
< div sınıf = 'td-div' > Edward div >
< div sınıf = 'td-div' > Liman işçisi div >
div >
< div sınıf = 'tr-div' >
< div sınıf = 'td-div' > kriko div >
< div sınıf = 'td-div' > git div >
div >
div >
Verilerin başarıyla eklendiği fark edilebilir:
2. Adım: 'tablo içeriği' Kapsayıcısının Stilini Oluşturun
ekran: tablo;
dolgu: 7 piksel;
}
Burada:
ekran: tablo satırı;
arka plan rengi: rgb ( 164 , 241 , 215 ) ;
dolgu: 7 piksel;
}
Yukarıdaki kod bloğuna göre “ görüntülemek ” özellik değeri “ olarak ayarlanır tablo satırı ”bu, verilerin bir tablodaki satırlar şeklinde ayarlandığı anlamına gelir,“ arka plan rengi ” özelliği elemanın arka yüzündeki rengi belirtmek için kullanılır ve son olarak “ dolgu malzemesi ” uygulanır:
Adım 4: 'td-div' Konteynerinde 'display: table-cell' Özelliğini uygulayın
ekran: tablo hücresi;
genişlik: 150 piksel;
sınır: #0f4bf0 katı 1 piksel;
kenar boşluğu: 5 piksel;
dolgu: 7 piksel;
}
Üçüncü div'e “ yardımıyla erişin .td-div ” nokta seçici ve ilgili kimlik ve aşağıda verilen CSS özelliklerini uygulayın:
Neden CSS'de “display: table-cell” kullanıyorsunuz?
Çözüm