Css

CSS Temel – CSS Tablolar (Tables)

CSS Temel - CSS Tablolar (Tables)

Bu dersimizde , CSS Tablolar özelliğini kullanarak bir HTML tablonun CSS ile özellikler atayarak şekil vericeğiz.

Herhangi bir stil veya nitelik içermeyen bir HTML tablosu oluşturduğunuzda , tarayıcılar onları biçimsiz olarak görüntüler. Bir tabloyu CSS ile stillendirmek görünümünü büyük ölçüde iyileştirebilir.

Tablolara Kenarlık Ekleme (border)

CSS border özelliği, tabloların kenarlıklarını tanımlamanın en iyi yoludur.

Border özelliği tablo da <table><th> ve <td> elemanları için kullanılabilir.

CSS Kapsama Kenar Stili (Collapse Borders)

Önceki örneğin çıktısını gördüyseniz, her tablo hücresinin ayrı kenarlıklara sahip olduğunu ve bitişik tablo hücrelerinin kenarlıkları arasında biraz boşluk olduğunu fark ettiniz. Tablo hücre sınırlarının varsayılan olarak ayrılması nedeniyle oluşur. Ancak, CSS border-collapse özelliğini kullanarak ayrı tablo kenarlıklarını birleştirebilirsiniz.

Aşağıdaki örnekteki stil kuralları, tablo hücre kenarlıklarını daraltacaktır, aynı zamanda tablo ve tablo hücre öğelerine bir piksel siyah kenarlığı uygulayacaktır.

CSS Tablo Genişliği ve Yüksekliği – Table Width & Height

Tablo genişliği için “width” özelliğini, tablo yüksekliği için ise “height” özelliğini kullanacağız.

CSS Tablo Metin Hizalama – Table Text Alignment

Hücrelerin içinde ki metinleri yatay hizalamak için “text-align” özelliğini kullanacağız. Bu özelliğin değerleri ise “right” (Sağ) , “left” (sol) ve “center” (orta) ‘dır. “center” değeri genişliğe göre ortalar.

Hücrelerin içinde ki metinleri dikey hizalamak için “vertical-align” özelliğini kullanacağız. Bu özelliğin değerleri ise “top” (üst) , “bottom” (alt) ve “middle” (orta) ‘dır. “middle” değeri yüksekliğe göre ortalar.

CSS Tablo İç Kenar Boşluğu (Table Padding)

Tabloda ki, td elementi üzerinde “padding” özelliğini kullanarak sınır ve içerik arasındaki boşluğu kontrol edebiliriz. “padding” i ilerleyen konularda ayrıntılı olarak göreceğiz.

CSS Tablo Rengi (Table Color)

Hücreleri renklendirmek için “color” (Metin Rengi) ve “background-color” (Arkaplan Rengi) özelliklerini kullanacağız.

 

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap