CSS Tablo Özellikleri

Tablolar bilgilerin belirli bir tertip ve düzen içerisinde gösterilmesini sağlayan kullanışlı, HTML deryasında kendine has nesnelerdir. Her zamanki bildiğimiz tablo bilgimizin dışında birkaç farklı tablo stil özelliği vardır.

TABLE-LAYOUT

Tablolar genelde içerisindeki yazıya göre genişler. Bunu fixed komutu ile sabitleyebiliriz. Eğer auto yaparsak içeriğe göre otomatik olarak genişleyecektir. Ekran çözünürlüğünü değiştirmekte buna dahildir.

table { border:-collapse: collapse; table-layout: auto; }
td, th { border: 1px solid #000;}

  
Başlık
  

    
Web Site
    
Url
  
  

    
Rıdvan Duran
    
ridvanduran.com.tr
  
  

    
google
    
google.com.tr
  

CAPTION-SIDE

Tablo başlığının altta yada üste olmasını belirler. capsion-side özelliği bottom ve top değerlerini alır.

BORDER-COLLAPSE

Tablo hücre çizgilerini ve kenarlıklarını üst üste bindirmeyip tek bir hat çizer. collapse değeri tek sınıra indirgersek separate değeri çizgileri üst üste bindirir.

table { border:-collapse: collapse; }
td, th { border: 1px solid #000;}
caption { background-color: #09C; color: #FFF; text-transform: uppercase; }

BORDER-SPACING

Tablodaki komşu hücrelerin sınır çizgileri arasındaki aralığı ayarlar. border-collapse:separate ile birlikte kullanılır. Birinci değer sütünlar arası genişliği, ikinci değer satırlar arası genişliği ifade eder.

table { border:-collapse: separate; border-spacing: 5px 2px; }
td, th { border: 1px solid #000;}
caption { background-color: #09C; color: #FFF; }

EMPTY-CELLS

Bir tabloda boş hücrelerin gösterilip gösterilmeyeceğini belirler. Boş olan hücreleri gösterebilir (show) veya gizleyebiliriz (hide).

table { empty-cells: hide; }

İlgili Konular

0 Yorum