Css ile Tablo Kullanımı

Değerli dostlar merhabalar, bu dersimizin konusu Css ile tablolarımızı özelleştirmek. Tablomuzu özelleştirmek için table, th ve td Html elementlerini kullanırız. Şimdi dilerseniz hiç vakit kaybetmeden ilk örneğimiz ile başlayalım.

table, th, td {
  border: 1px solid black;
}

Yukarıdaki örneğimizde table, th, td elementleri tek seferde seçip kenarlık özelliği ekledik. Peki sadece tablomuza kenarlık vermek istersek ne yapmalıyız. Şimdi aşağıdaki örnek kodumuzu inceleyelim.

table {
  border: 1px solid black;
}

Yukarıda sadece table Html elementini seçip kenarlık özelliği kazandırdık.

Css ile Tablomuzu Eşit Bölme

Şimdi bu başlığımızda Css ile tablo stunlarını eşit bir şekilde bölmeyi öğreneceğiz. Aşağıdaki örnek kodumuzu inceleyelim.

table {
  width: 100%;
}

th {
  height: 50px;
}

Yukarıda th elementimize height:50px özelliği vererek stunların eşit şekilde bölünmesini sağladık.

Css ile Tablomuza Yatay Bölücü

Şimdi ise Css ile tablomuzu yatak şekilde bölelim. Bunun için Css’in border-bottom özelliğini kullanacağız. Aşağıdaki örneğimizi inceleyelim.

th, td {
  border-bottom: 1px solid #ddd;
}

İşte bu kadar basit dostlar. Sizde örnekler üzerinde alıştırmalar yaparak daha iyi anlayabilirsiniz. Burada önemli olan tablomuz için 3 adet Html elementimizin olduğunu bilmektir. Diğer bir derste görüşmez üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares