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.

Özellik Açıklama
table-layout Tablo genişliğini içerisindeki yazıya göre otomatik ve sabit olarak ayarlar.
caption-side Tablo başlığının yerini belirler.
border-collapse Tablo hücre çizgilerini ve kenarlıklarını üst üste bindirmeyip tek bir hat çizer.
border-spacing Tablodaki komşu hücrelerin sınır çizgileri arasındaki aralığı ayarlar.
empty-cells Bir tabloda boş hücrelerin gçsterilip gösterilmeyeceğini belirler.

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

Yorum Yap

Boş Geçilmez
Boş Geçilmez
Boş Geçilmez

0 Yorum