Yalnızca Etiket ve CSS Kullanarak Tablo Oluşturma

” etiketleri vardır.

---

---

Örnek
Bir tablo oluşturmak için aşağıdaki HTML kodu örneğini göz önünde bulundurun:

< div sınıf = 'divTable' >
< div sınıf = 'üst bilgi satırı' >
< div sınıf = 'divCell' >< B > İD < / B >< / div >
< div sınıf = 'divCell' >< B > İsim < / B >< / div >
< div sınıf = 'divCell' >< B > Yaş < / B >< / div >
< / div >
< div sınıf = 'divRow' >
< div sınıf = 'divCell' > 001 < / div >
< div sınıf = 'divCell' > demirci < / div >
< div sınıf = 'divCell' > 25 < / div >
< / div >
< div sınıf = 'divRow' >
< div sınıf = 'divCell' > 002 < / div >
< div sınıf = 'divCell' > John < / div >
< div sınıf = 'divCell' > 31 < / div >
< / div >
< div sınıf = 'divRow' >
< div sınıf = 'divCell' > 003 < / div >
< div sınıf = 'divCell' > Charles < / div >
< div sınıf = 'divCell' > 28 < / div >
< / div >
< / div >

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

• A '
  “ etiketi, “ isimli sınıf ile birlikte eklenir. divTable ”.
• İçinde ' div ” konteyner elemanı, başka bir tane ekle” div ' olarak bildirilen sınıfa sahip kapsayıcı öğe üst bilgi satırı ”.
• Yine, üç “ekleyin div 'adlı sınıflara sahip öğeler' divRow ” ile üç alt kapsayıcı ile “ divCell ' sınıf.
• Ardından, üç div öğesi ekleyin ve “ İD ”, “ İsim ' Ve ' Yaş ” tablonun başlık satırında.
• Bundan sonra, her bir div öğesi için “ID”, “Name” ve “Age” değerlerini belirtin.

Bu tamamen “ nasıl kullanılacağıyla ilgiliydi. div ” öğesi bir tablo oluşturmak için. Şimdi, CSS özelliklerini ona uygulayalım:

---

---

.divTable
{
ekran: tablo;
Genişlik :Oto;
arka plan- renk :#eee;
sınır :1px katı # 666666 ;
kenar boşluğu: 5px;
}
.divRow
{
Genişlik :Oto;
ekran: tablo satırı;
}
.divCell
{
Genişlik :150px;
kayan nokta:sol;
ekran: tablo sütunu;
arka plan- renk : rgb ( 212 , 209 , 209 ) ;
}

Yukarıdaki CSS stil öğesinde:

• “ anlamına gelen bir seçici ekleyin. divTable ” (tüm tablo değerlerini içerir) ve istenen CSS özelliklerini tanımlayın (yani, “ görüntülemek ”, “ Genişlik ”, “ arka plan rengi ”, “ sınır ' Ve ' kenar boşluğu ”) tablo içeriği için.
• Bundan sonra, “ öğesinin öğelerini seçen bir sınıf seçici ekleyin. divRow ' CSS'yi eklemek için sınıf ' Genişlik ' Ve ' görüntülemek ” elementlere özellikler.
• Son olarak, CSS stil özelliklerini “ içindeki öğelere ekleyin. .divCell ” sınıf seçici.

Bu, çıktıda bir tablo oluşturacak ve aşağıdaki sonuçları gösterecektir:

Bu, yalnızca