Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Tablo (table)

Tablo özelliği bir tablonun sayfaya yayılışını düzenler.

Genel

Tablo özelliği bir tablonun sayfaya yayılışını düzenler.
Destekleyen Tarayıcılar:IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.

Özellikler Açıklama Değerler IE F N W3C
border-collapse Sınırlar tek sınıra indirgensin mi yoksa standart HTML'de olduğu gibi mi kalsın collapse
separate		 5 1 7 2
border-spacing Hücre sınırlarını belirleyen uzaklığı saptar (yalnız "separated borders" modeli için) uzunluk uzunluk 5M 1 6 2
caption-side Tablo başlığının yerini belirler top
bottom
left
right		 5M 1 6 2
empty-cells Bir tabloda boş hücreleri gösterilip gösterilmeyeceğini belirler ( "separated borders" modeli için)  show
hide		 5M 1 6 2
table-layout Tablonun hücrelerini satır ve kolonlarını görüntülüyen algoritmayı belirler auto
fixed		 5 1 6 2

Sınır İndirgeme (border-collapse) Özelliği

Bu özellik tablo sınırlarının tek sınıra indirgenmesini ya da standart HTML'de olduğu gibi ayrık kalmasını belirler.
 
table 
{
border-collapse: separate
}
Olası değerler:
separate: Sınırlar teke indirgenmeyecek
collapse: Varsayılan: Olanak oldukça sınırlar tek sınır çizgisine indirgenecek

Sınır aralığı (border-spacing) Özelliği

Bu özellik komşu hücrelerin sınır çizgileri arasındaki aralığı ayarlar (yalnız "separated borders" modeli için geçerlidir).
 
table 
{
border-spacing: 10px
}
Olası değerler:
uzunluk uzunluk: uzaklığı px, cm, vb. birimlerle tanımlar. Eğer tek uzunluk parametresi verilirse, hem yatay hem de düşey uzaklığı belirtir. Aksi halde ilki yatay uzaklığı ikincisi düşey uzaklığı belirler. Uzunluklar eksi olamaz.

Başlık yanı (caption-side) Özelliği

Bu özellik tablo başlığını yerini belirtir.
 
table 
{
caption-side: left
}
Olası değerler:
top: Varsayılan değer. Tablo başlığını tablonun üstüne yerleştirir.
bottom: Tablo başlığını tablonun altına yerleştirir.
left: Tablo başlığını tablonun soluna yerleştirir
right: Tablo başlığını tablonun sağına yerleştirir.

Boş hücreler (empty-cells) Özelliği

Bu özellik bir tabloda boş hücrelerin gösterilip gösterilmeyeceğini belirtir (yalnız "separated borders" modeli için geçerlidir). 
table 
{
empty-cells: show
}
Olası değerler:
hide: Varsayılan değer. Boş hücrelerin çevresine sınır çizgileri çizilmez.
show: Sınır çizgileri boş hücrelerin çevrelerine çizilir.

Tablo yayma (table-layout) Özelliği

Bu özellik tablo hücrelerini, satırları ve kolonları görüntülemek için gereken algoritmayı belirtir.

Değişmez tablo yayılımı:

  • Değişmez tablo yayılımı, tablonun tarayıcı tarafından otomatik tabloya göre daha hızlı açılıp gösterilmesini sağlar.
  • Değişmez tablo yayılımında, yatay açılım yalnız tablonun enine bağlıdır. Kolonların enleri ya da hücrelerin içerikleri yayılmada önemli değildir.
  • Değişmez tablo yayılımını kullanarak, tarayıcının tüm tabloyu göstermesi ilk satırdaki hücrelerin alınmasıyla başlayabilir.

    Otomatik tablo yayılması:

  • Otomatik tablo yayılmasında kolon uzunlukları o kolondaki parçalanamaz bölümü en büyük olan hücreye göre saptanır.
  • Bu yöntem bir ölçüde daha yavaştır. Çünkü tüm tablonun bilgilerinin alınmasından sonra tablo yazılmaya başlanır.
    table 
{
table-layout: fixed
}
    Olası değerler:
    automatic: Varsayılan değer. Kolon eni hücre içeriğine göre düzenlenir.
    fixed: Kolon eni tablo enine ve kolonların enine göre düzenlenir.