CSS Stillerinin Son başlığı olan tablo stillerinden bahsedeceğim.. Bu konu bir kaç başlıktan oluşacaktır, her başlık CSS Tablo Stillerinin bir parçası olarak düşünülebilir.

Tablo Kenarlıkları

CSS Tablo Stillerinin Kenarlıklarını ayarlarken CSS border özelliği kullanılır.Aşağıda bir örnek göstererek border özelliğini açıklayalım;

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

Yukarıda çoklu CSS özelliğini kullanarak; table, th ve td taglarına 1px boyutunda solid black özelliği katarak siyah bir çerçeve (kenarlık) özelliği girdik.. Fakat örnekte oluşturduğumuz kenarlık, tablo üzerinde denediğimiz zaman iki kat çerçeve olduğunu göreceksiniz. Bunun sebebi HTML default ayarlarında tablo stillerine kenarlık katarken iki katmandan oluşan bir kenarlık özelliği olmasıdır.. Buna engel olmak için Collapse Border özelliğini kullanmalıyız;

Collapse Borders (Çökük Kenarlıklar)

Collapse Border özelliği CSS üzerinde border-collapse bileşeni ile gerçekleşir;

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

Şimdi ki örneğimiz ile başta gösterdiğimiz örnek arasındaki fark; collapse-border özelliğini kullanarak tabloya tek katlı bir kenarlık vermiş olmamızdır. Geri kalan bütün özellikleri aynıdır.

Tablo Genişlik ve Yüksekliği

Tablo genişlik ve yükseklik stilleri CSS üzerinde width ve height özellikleri ile oluşturulur, fakat bir farkı vardır ki bunlar aşağıdaki örnekte de göreceğiniz gibi, sayfanın % olarak kaplayacağı alan tarzı ile belirtilir;

table
 {
 width:100%;
 }
 th
 {
 height:50px;
 }

Gördüğünüz üzere, tablo yüksekliği sayfanın yarısını kaplarken, genişlik bütün sayfa alanına hitap etmektedir.

Tabloda Yazı Hizalama

Bu özellik Yazı stillerinde de gösterdiğim CSS Text özelliği olan text-align yöntemi ile oluşturulabilir;

td
 {
 text-align:right;
 }

Bu özelliğin yanı sıra, vertical (dikey) hizalama yöntemi ile birlikte de kullanılabilir. vertical-align değişkeni içerisine atayabileceğimiz değerler; ike top, bottom, ya da middle olarak ayarlanabilir;

td
 {
 height:50px;
 vertical-align:bottom;
 }

Tablo Dolguları

Tablo dolgularından kastım, padding ayarıdır. Padding ayarı bir CSS elemanın içerisinde oluşturulacak olan boşluk ya da anti boşluk olarak açıklanabilir.. Aşağıda vereceğim örneği kendi demonuzda kullanarak ne demek istediğimi anlayabilirsiniz;

td
 {
 padding:15px;
 }

Bu örnekte padding kullanarak her satır da 15px’lik bir boşluk değeri verilmiştir.

Tablo Rengi

Aşağıda göstereceğim örnekte, tablo renginin CSS background-color özelliği ile gerçekleştiğini göreceksiniz;

table, td, th
 {
 border:1px solid green;
 }
 th
 {
 background-color:green;
 color:white;
 }

Yukarıdaki örnek daha da özelleştirilebilir.

Arkadaşlar CSS Stil özelliklerini hemen hemen tamamladığımı düşünüyorum.. Bir dahaki dersimizde CSS kutu Modellerinden bahsedeceğim..