Bölüm 6

Tabloların Düzenlenmesi

Sayfa 3


<caption>,<colgroup>, <col>, <thead>, <tfoot> ve <tbody> Elementleri

 

<caption> Elementi :

Caption, Sanskritçe kökenli ve anlamı başlık olarak kabul edilebileek bir sözcüktür. Kaptan, kaput, kefal, aynı kökenden gelmektedir. Caption elementinin içeriği, tablonun başlığını oluşturmaktadır. DTD deki <caption> elementi tanımı :

 

 

şeklindedir. Bu tanımdan, <caption> elementinin başlangıç ve bitiş imlerinin zorunlu olduğu, içeriğinin boş veya istendiği kadar satırıçi elementlerden oluşması gerektiği anlaşılmaktadır. <caption> Elementinin sözdizimi,

<caption                               (Başlangıç imi : zorunlu )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

>

İçerebileceği elementler :boş veya istendiği kadar satırıçi elementler

</caption>                                            (Sonuç imi:zorunlu )

İçerebilecek elementler : <table> Elementi.

şeklindedir.

<caption> elementinin içeriği, kısa bir metin olmalıdır. Gerektiğinde <br> gibi satırıçi elementleri de kullanılabilir.

<caption> Elementin, genel <table> elementinin içeriğini oluşturabilen elementlerden ilkidir. Bu elementin incelenmesi ile ilk <table> elemnti uygulama örneği oluşturulabileck düzeye ulaşmış bulunuyoruz. İlk tablo uygulaması b6s3Uygulama1dosyasında verilmiştir. Bu en basit tablo örneğinde, <table> elementinin içeriği olarak kullanılmış elementler arasından sadece <caption> elementi incelenmiştir. Diğerlerinin incelenmesi de kısa süre sonra tamamlanmış olacaktır.

<colgroup> Elementi :

 

Bu element, birbirleri ile semantik yani anlam olarak ilgili olan sütunların, benzer bir şekilde gösterilmesini sağlamak üzere gruplandırılmasını sağlamaktadır. DTD deki tanımı :

 

 

şeklindedir. Bu tanımdan görüldüğü gibi, <colgroup> elementinin başlangıç imi zorunlu, bitiş imi isteğe bağlıdır. Ne yazık ki nadiren uyulmakla beraber bitiş iminin belirtilmesi alışkanlığının kazanılması, kodların okunurluğunu ve belge çözümleyicilerin desteğini arttıracaktır. Bu elementin içeriği boş bırakılabilir (eğer sadece açılım (span) niteliğinden yararlanılmak istenirse) veya istendiği kadar <col> elementi ile doldurulabilir. Bu elementin belge çözümleyicilerce desteği zayıftır. Bu nedenle uygulandığı sayfalar iyi bir şekilde denenmeden kullanıma açılmamalıdır. Sözdizimi:

<colgroup                                  (Başlangıç imi : zorunlu )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

span="sayı" [YN] (grubun kapsamındaki sütunların sayısı)

width="Çoklu Uzunluk" [YN] (piksel olarak mutlak birimler veya yüzde değerler veya göreli değerler) (ilgili sütunların genişliği)

cellhalign       Aşağıda açıklanmıştır.

cellvalign      Aşağıda açıklanmıştır.

>

İçerebileceği elementler :boş bırakılabilir veya istendiği kadar <col> elementi ile doldurulabilir

</colgroup>                                            (Sonuç imi: isteğe bağlı)

şeklindedir.

İçerebilecek elementler : Sadece <table> Elementi.

<colgroup> Elementinin Nitelikleri :

span Niteliği : Bu niteliğin değeri, sıfırdan büyük bir tamsayı olup, grubun kapsadığı sütun sayısıdır. Span niteliği verilmezse, grubun sadece bir tek sütundan oluştuğu kabul edilir. Eğer, <colgroup> elementi, bir veya daha fazla <col> elementi içeriyorsa, o zaman span niteliği verilmez veya yanlışlıkla verilmişse gözönüne alınmaz. Bu konuda, açıklayıcı bazı örnekler verilerek konu daha açık olarak belirtilebilir. İlk örnek, açılım niteliğinden yararlanarak tablo sütunlarını belirtmek için yapılmış bir bildirim olacaktır :

Yukarıdaki örneğin görüntülenmesi b6s3uygulama2.htm dosyasında görülebilir. Aynı sonuç :

şeklindeki kodlar ile de alınır. İkinci versiyonda iki tane birbiribirinin aynı <col> elementi kullanılması gerekmektedir. Eğer, böyle çok sayıda birbirinin aynı <col> elementi tekrarlanması gerekiyorsa, o vakit bir tek <colgroup> elementi kullanımı daha kompakt ve anlaşılır bir kod oluşturulabilecektir.

width Niteliği : Bu niteliğin değeri, sütun grubu içinde sütunların varsayılan genişliğini belirler. Nitelik değerleri, standart piksel, yüzde ve bağıl uzunluk olarak verilebilir. Özel olarak width="0*" şeklinde bir bildirim yapıldığında, gruptaki tüm sütunların genişliği, içeriklerini alabilecek minimum genişlikte olacaktır. Bu bildirimin görüntü sağlayan belge çözümleyicilerde tablonun aşamalı görüntülenmesini engelleyeceği uyarısı yapılmıştır. Yani, tablonun görüntülenmesi için tümünün yüklenmesinin beklenmesi söz konusudur. Bunun nedeni, her sütun için hücre genişliği aynı olacağına göre, maksimum genişliğin bilinmesi için tüm içeriğin bilinmesi gereğidir. Ayrıca eğer, bir <col> elementi tarafından, açık (explicit) bir width niteliği belirtilirse, bu yeni değer, <colgroup> nitelik değerine göre daha yüksek bir öncelik alacaktır.

cellhalign Niteliği: DTD deki tanımı, yukarıda görülen cellhalign nitelik değerinin açılımı aşağıdaki gibidir :

Burada en önemli nitelik align niteliğidir. İlginç olan align niteliğinin tablonun belge içinde hizalanması için devam ettirilmediği halde, hücrelerdeki içeriğin hizalanması için devam ettirilmiş olmasıdır. Bu durumda, CSS terimlerine gerek olmadan da hücrelerdeki içeriğin hizalanması yapılabilecektir. CSS terimleri de aynı olanağı sağlayabilmektedir. Seçim için, öncelik bizim görüşümüze göre, HTML 4.01 kesin spesifikasyonu 'nun sonuna kadar tüketilmesi sonra gerek gerek kalırsa CSS terimlerine başvurulması olmalıdır.

cellvalign Niteliği: Yukarıda DTD deki tanımı görülmekte olan cellvalignniteliğinin açılımı, DTD ye göre,

Düşey hizalama için de CSS terimlerine gerek olmadan hücre içeriklerinin düşey hizalamasının HTML 4.01 kesin spesifikasyonu kapsamında yapılabilmesi kolaylık sağlayıcı bir olgu olarak kabul edilebilir.

Tablo grubu elementlerinin tümü tanıtıldıktan sonra, tablo hücrelerinin hizalama özelliklerinin kalıtımla yayılımı üzerinde durulacaktır.

 

<col> Elementi :

 

<col> Elementi, sütünlar için ortak niteliklerin açık olarak bildirimi için kullanılır. Bu element hem bir <colgroup> topluluğu içinde hem de dışında bildirilebilir. DTD deki tanımı :

 

 

şeklindedir. Bu bildirimden <col> elementinin boş bir element olduğu, bu nedenle başlangıç iminin zorunlu, bitiş iminin kullanımın yasak olduğu görülebilir. Sözdizimi:

<col                                  (Başlangıç imi : zorunlu )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

span="sayı" [YN] (gruptaki sütunların kapsama sayısı)

width="Çoklu Uzunluk" [YN] (piksel olarak mutlak birimler veya yüzde değerler veya göreli değerler) (ilgili sütunların genişliği)

cellhalign       Yukarıda açıklanmıştır.

cellvalign      Yukarıda açıklanmıştır.

>

İçerebileceği elementler :yok. (Boş Element)

                                            (Sonuç imi: yasak)

şeklindedir.

İçerebilecek elementler : Sadece <table> Elementi.

<col> Elementinin nitelikleri, <colgroup> ile aynıdır.

Bir Tablonun Sütun Sayısının Hesaplanması

Bir tablonun sütun sayısının hesaplanması için iki yöntem bulunmaktadır. Bu yöntemler, öncelik sıraları ile, aşağıda verilmiştir :

  1. Eğer<table> elementi, <colgroup> ve <col> elementleri içeriyorsa, aşağıdaki toplamlar sütun sayısını verir:
  2. <table> elementi, hiç bir <colgroup> veya <col> elementi içermiyorsa, sütun sayısı, satır elementlerinin içeriklerinden hesaplanacaktır. Önce maksimum sayıda sütun içeren satır bulunur. Sütün sayısına, çok sütunlu hücreler de dahil edilir. Tablonun sütun sayısı, maksimum sütun sayısı belirten satırın sütun sayısına eşittir. Başaka satırlarda daha az sütun bildirilmiş ise, eksik kalan sütunlar satır sonuna eklenir. Satır sonu, tablonun yazım yönüne (dirniteliğine) bağlıdır.

Tablonun sütun sayısının doğru olarak belirlenmesi için her iki yöntemle de yapılacak hesapların birbirleri ile örtüşmesi gerekir.

Bir Tabloda Sütunların Genişliğinin Hesaplanması :

CSS uygulamaları dışında, bir tablonun sütun genişliklerinin belirtilebilmesi sadece iki elementten yararlanılabilir. Bunlar öncelik sırası ile, <colgroup> ve <col> elementleridir. Tablo genişliğinin hesaplanmasında belirtildiği gibi, mutlak piksel değerleri, değişik çözünürlüklerde iyi ölçeklenmediğinden, göreli birimlerin kullanılması tercih edilmelidir. Aşağıdaki örnek bu konuda bir fikir vermek için hazırlanmıştır :


Tablonun Çözümlenmesi :

 

Ofis :1 Bölge : 16 Karbon Monoksit 50 46.80 1.89
Ofis :3 Bölge : 18 Metanol 100 54.88 10.88

 

Bu tablonun yapısında altı tane sütun sayılmaktadır. Bunlardan ilki bağımsız bir sütundur ve tablonun toplam genişliğinin %10 unu kaplayacaktır. Bundan sonraki üç sütun, bir sütun grubu içinde toplanmıştır. Sütunların kaplayacakları genişliklerin, bir sütun grubu içinde gruplanmaları ile ilgisi yoktur. Bu gruptan ilk sütun, toplam genişliğin %20 sini kaplayacaktır. Tablonun geri kalan kısmına kalan, toplam genişliğin %70 lik kısmı, (10+3+3+3)=19 kısma bölünecek, ilk sütun (üçüncü sütun) toplam genişliğin (%70/19)x10=%36.8, sonraki (dördüncü, beşinci ve altıncı) sütunlar, (%70/19)x3=%11.05 lik genişliklerde olacaklardır. Çözümlenmiş tablonun görüntüsü de bu genişlikleri doğrulamaktadır.

Tablonun toplam genişliğinin, boş alanın %90'ı olarak baştan bildirilmesi, tablonun sütunlarının baştan hesaplanabilmesini sağladığından, tablonun aşamalı olarak yüklenebilmesine olanak vermiştir. Bilindiği gibi, aşamalı olarak yüklenebilen tablolar daha hızlı görüntülenirler.

Bir tablonun sütun genişlikleri hesaplatılırken, sütunlara girecek verilerin de bu genişliklerle uyumlu olması gerekmektedir. Bir sütunun minimum genişliği, sütundaki en uzun verinin genişliği olarak kabul edilir. Bu uygunluk sağlanamazsa, belge çözümleyicinin tablo düzenleme algoritması devreye girer. Bu durumda, veriler sözcük aralarından kesilerek alt satıra alınırlar, veriler parçalanamazsa sütun boyu uzatılır ve tablonun görüntüsü, kodların belirttiğinden çok farklı olabilir.

Belge çözümleyicilerin tablolama algoritmaları son derece gelişmiş olduğundan, tablonun sütun genişlikleri, verilere göre otomatik olarak adapte olarak, kendi kendine oluşabilir. Sütun genişliklerinin hesaplanması için aşırı uğraşmadan önce, bir kez otomatik olarak oluşabilecek tablonun incelenmesinde yarar bulunmaktadır.

Yukarıdaki örnekte, tablo hücrelerinin içeriklerininin hizalanması için, kalıtım mekanizmasından yararlanılmamış ve her hücre için hizalama yöntemi özel olarak belirtilmiştir. Bu yöntem kod yazımı açısından en verimsiz, belgenin belge çözümleyiciler tarafından tam olarak desteklenmesi için en garantili yöntemdir. Bu konuda seçim hakkı yazarındır. Daha kompakt bir kod yazılarak, en çok kullanılan belge çözümleyicilerde aynı sonucu verdiği görülürse, tercih doğal olarak en kısa kodu içeren seçenek olmalıdır.

<colgroup> ve <col> Elementlerinin Kullanımlarında Uyarılar

<col> Elementi sadece, <colgroup> elementinin içeriği olarak ve <colgroup> elementinin açılım (span) niteliğinin kullanılmadığı durumlarda kullanılır. Yukaraıdaki örneklerde görüldüğü gibi, aynı tablo tasarımının sadece <colgroup> ve açılım niteliği veya <colgroup> ve <col> elementlerinin birlikte kullanımları ile kodlamalarının yapılması olanağı bulunmaktadır. <colgroup> ve <col> Elementleri, sadece bazı sütunların benzer özellikleri varsa, her sütun için aynı kodun tekrarlanmaması için kullanılır. Sütunların ayırdedici nitelikleri yoksa, salt sütun sayını belirtmek için <colgroup> ve <col> elementlerinin kullanılmasının gereği yoktur. Belge çözümleyiciler, tablo kodlamalarından sütun sayılarını hasaplayabilecek yeteneklerle donatılmışlardır.

 

<thead> Elementi :

 

<thead> (table head= tablo başlığı) Elementi, bir tablonun başlık grubunu belirtir. DTD deki tanımı :

 

 

olarak verilmiştir. Bu tanımdan <thead> elementinin başlangıç iminin zorunlu, bitiş iminin isteğe bağlı, içeriğinin en az bir tane olmak üzere istendiği kadar <tr> elementi ile doldurulabileceği görülmektedir. <thead> Elementinin sözdizimi,

<thead                                  (Başlangıç imi : zorunlu )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

cellhalign       Yukarıda açıklanmıştır.

cellvalign      Yukarıda açıklanmıştır.

>

İçerebileceği elementler :en az bir tane olmak üzere istendiği kadar <tr> elementi

  </thead>                     (Sonuç imi: isteğe bağlı)

şeklindedir.

İçerebilecek elementler : Sadece <table> Elementi.

Tablo Başlığı Elementinin Uygulanması

<thead> Elementi genel olarak statik bir tablo başlığı oluşturmak için kullanılır. Bu başlık sabit kalırken tablo gövdesi kaydırma çubukları yardımı ile kayacak bir şekilde görüntülenecektir.

<thead> Elementinin bir uygulama örneği için b6s3Uygulama3 dosyasını inceleyiniz.

<thead> Elementi, <colgroup> elementinden sonra bildirilir. İçeriğindeki sütun sayısı, <tfoot> ve <tbody> elementleri ile aynı olmalıdır. Her tabloda sadece bir tane <thead> elementi olabilir.

 

<tfoot> Elementi :

 

<tfoot> Elementi, bir tablonun alt bilgilerini içeren sütünları gruplar. Uygulama şekli ile <thead> elementi ile aynıdır. DTD deki tanımı :

 

 

şeklindedir. Bu tanımdan <tfoot> elementinin başlangıç iminin zorunlu, bitiş iminin isteğe bağlı, içeriğinin en az bir tane olmak üzere istendiği kadar <tr> elementi ile doldurulabileceği görülmektedir. <tfoot> Elementinin nitelik listesi, <thead> elementi ile aynıdır. <tfoot> Elementinin sözdizimi,

<tfoot                                  (Başlangıç imi : zorunlu )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

cellhalign       Yukarıda açıklanmıştır.

cellvalign      Yukarıda açıklanmıştır.

>

İçerebileceği elementler :en az bir tane olmak üzere istendiği kadar <tr> elementi

  </tfoot>                     (Sonuç imi: isteğe bağlı)

şeklindedir.

İçerebilecek elementler : Sadece <table> Elementi.

<tfoot> Elementi, <colgroup> elementinden sonra bildirilir. İçeriğindeki sütun sayısı, <thead> ve <tbody> elementleri ile aynı olmalıdır. Her tabloda sadece bir tane <tfoot> elementi olabilir.

 

<tbody> Elementi :

 

<tbody> Elementi. tablo veri hücre elementlerini içeren bir kabuk elementidir. DTD deki tanımı:

 

 

şeklindedir. Bu tanımdan, <tbody> elementinin başlangıç ve bitiş imlerinin isteğe bağlı, içeriğinin en az bir tane olmak üzere istendiği kadar <tr> elementi ile doldurulabileceği görülmektedir. Bu elementin yeri (varsa) <thead> ve (varsa) <tfoot> Elementlerinden sonradır. <tbody> Elementinin sözdizimi,

<tbody                                  (Başlangıç imi : gerekli )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

cellhalign       Yukarıda açıklanmıştır.

cellvalign      Yukarıda açıklanmıştır.

>

İçerebileceği elementler :en az bir tane olmak üzere istendiği kadar <tr> elementi

  </tbody>                     (Sonuç imi: isteğe bağlı)

şeklindedir.

İçerebilecek elementler : Sadece <table> Elementi.

<tbody> Elementinin içeriğindeki sütun sayısı, <thead> ve <tfoot> elementleri ile aynı olmalıdır. Her tablo elementinini içeriğinde, sadece en az bir tane olmak üzere istendiği kadar <tbody> elementi olabilir. Eğer tablo ne <thead> ne de <tfoot> kısmı içermiyorsa ve sadece bir tek <body> kısmı varsa, o zaman <bbody> elementi, göze görünmez olabilir. Yani, isteğe bağlı başlangıç ve bitiş imleri belirtilmeyebilir, ama bu kendisinin olmadığı anlamına gelmez. Tam tersine her tabloda olduğu gibi, başlangıç ve bitiş imlerinin belirtilmediği tablolarda bile <tbody> elementi ve içeriği bulunmaktadır, sadece başlangıç ve bitiş imleri görünmez o kadar. Birden fazla <tbody> olduğu durumlarda, <tbody> elementlerinin en az başlangıç imleri belirtilmelidir. Tablo kodlarının düzenli görünümü için aslında, <tbody> elementinin başlangıç imlerinin kullanıldığı durumlarda, bitiş imleri de birlikte kullanılmalıdır.

 

<tr> Elementi :

 

<tr> (table row=tablo satırı) Elementi. tablo veri hücre elementlerini satır temelinde içeren bir kabuk elementidir ve inceleyeceğimiz tablo kabuk elementlerinin sonuncusudur. DTD deki tanımı:

 

 

şeklindedir. Bu tanımdan, <tr> elementinin başlangıç iminin zorunlu, bitiş iminin ise isteğe bağlı, içeriğinin en az bir tane olmak üzere istendiği kadar <th> veya <td> elementi ile doldurulabileceği görülmektedir. Bu elementin belirtilme yeri <tbody> elementinden sonradır. <tr> Elementinin sözdizimi,

<tr                                  (Başlangıç imi : zorunlu )

Ortak Temel Nitelikler(Çekirdek Nitelikler, Uluslararasılaştırma Nitelikleri, Script Yazılabilecek Olaylar)

cellhalign       Yukarıda açıklanmıştır.

cellvalign      Yukarıda açıklanmıştır.

>

İçerebileceği elementler :en az bir tane olmak üzere istendiği kadar <tr> elementi

  </tbody>                     (Sonuç imi: isteğe bağlı)

şeklindedir. Nitelikleri önceki elementler ile aynı olduğu için önceden incelenmiş durumdadırlar.

İçerebilecek elementler : <thead>, <tfoot> ve <tbody> Elementleri.

<tr> Elementinin içeriğindeki sütun sayısı, <thead>, <tfoot> ve <tbody> elementleri ile aynı olmalıdır. Her tabloda satır sayısı kadar <tr> elementi olmalıdır. Tablo kodlarının düzenli görünümü için, <tr> elementi başlangıç ve bitiş imleri ile birlikte kullanılmalıdır.

 

 

Saturday, July 15, 2006 20:29

validate in W3C !Valid HTML 4.01!