Bölüm 6

Tabloların Düzenlenmesi

Sayfa 6 /6


Tablo Uygulama Örnekleri

 

Bir Tabloda Hücre İçeriklerinin Yatay Hizalanması İçin Kalıtımın Etkisinden Yararlanılması

 

Bu mekanizmayı içeren Örnek Tablo1'in kodları aşağıda görülmektedir:

 

Örnek Tablo1'in IE 6.02 SP2 deki çözümlenmesi aşağıda görülmektedir:

Porselen Çay Takımları

Cins Fiyat (YTL)
Çay Tabağı 10.00
Çay Fincanı 20.50
Sütlük 102.30
(Bu fiyatlara %15 KDV eklenecektir !)

 

Sonuçların İncelenmesi :

Tablo Tablonun sayfa içinde yerleştirilmesi, CSS2.1 in yer tutma özelliklerinden yararlanılarak yapılmıştır. Bu yöntemle her türlü nesnenin sayfa içine yerleştirilmesi kolaylıkla gerçekleştirilebilmektedir.

Tablo için oluşturulan bu kodlama, önemli ölçüde kod ekonomisi sağlamaktadır. Tablo içinde hücre içeriklerinin hizalanması homojen değildir. Tablo başlıklarında (thead), hücre içerikleri hücre ortasına hizalanırken, tablo içeriğinde (tbody) hücrelerden ilki hücre ortasına, ikincisi hücre sağına hizalanmaktadır. Tablo dipnotu (tfoot) ise iki hücrenin birleştirilmesi ve ortya hizalı ortak bir mesaj yazılması ile gerçekleştirilmektedir. Tablo sütunlarının hizalanma yöntemi, <colgroup> elementi düzeyinde ortaya hizalı olarak belirtilmiştir. Bu nitelik kalıtımla tüm tablonun sutunlarına (dipnot dahil) yayılacaktır. Bu hizalanma tablo başlığının (thead) ikinci sütununun dışında, tüm tablo hüre içerikleri için (dipnot dahil) istenilen hizalanma şeklidir. Tablo başlığının (thead) ikinci sütununun hizalanması ise, ortaya yaslı olmalıdır. Bunun için sadece iikinci başlık hücresi için geçerli olacak bir ortaya hizalama niteliği belirtilmesi yeterli olmaktadır. Bu bildirim, sadece bu hücre için kalıtımı kestiğinden, hücre içeriği öngörüldüğü gibi ortaya yaslı olarak görüntülenecektir. Tablo başlığının altındaki ikinci hücrelerde ise kalıtım etkisi devam ettğinden hepsinin içeriği sağa yaslı olarak görüntülenecektir. Burada, sadece üç kez hizalama niteliği belirtilerek (iki tanesi <colgroup>, bir tanesi <thead> içinde) istenildiği kadar satır içerebilecek olan tüm tablonun hizalanması sağlanabilmektedir.

Ne yazık ki, bu örnek, sadece Internet Explorer 6.02 SP2 ve Opera 8 tarafından doğru olarak görüntülenebilmiştir. Netscape, grubu belge çözümleyiciler (Firefox 1.5 beta dahil), hizalamanın kalıtımla geçmesini desteklememektedir. Bu durumda, kod ekonomisi sağlayabilen, fakat tüm belge çözümleyicilerde desteklenmeyen bu kodlamanın genel olarak kullanım olanağı bulunmamaktadır (sadece Internet Explorer 6.02 SP2 ile çok yaygın olmayan Opera 8 ve destekleyebilen alt sürümlerinin kullanıcıları için uygundur). Genel olarak desteklenebilecek kodlar için Firefox destekleyene kadar tablo içeriğinin hizalanmasında kalıtımdan yararlanmamak gerekmektedir.

 

Bir Tabloda Hücre İçeriklerinin Yatay Hizalanması İçin Evrensel olarak Desteklenen Kodlar (Kalıtım Mekanizması Kullanılmadan) (Sadece HTML Kullanımı ile)

 

Bu yöntem, kodları aşağıda görülebilen Örnek Tablo : 2 de uygulanmıştır:

Örnek Tablo 2' nin IE 6.02 SP2 deki görünüşü:

Porselen Çay Takımları

Cins Fiyat (YTL)
Çay Tabağı 10.00
Çay Fincanı 20.50
Sütlük 102.30
(Bu fiyatlara %15 KDV eklenecektir !)

 

Bu kodlar tüm belge çözümleyicilerde sorunsuz desteklenmektedir. Yöntem olarak tüm hücrelerin hizalanma nitelikleri açık olarak bildirilmiştir. Kodlarda, hiç kalıtımdan yararlanılmamıştır. Bir önceki örneğe göre daha uzun (hatta yazılabilecek en uzun) fakat tüm belge çözümleyicilerde desteklenmesi en garantili kodlardır.

Aynı kodların CSS kullanılarak oluşturulmuş variyantı (Örnek Tablo 3) de aşağıda görülmektedir.

 

Bir Tabloda Hizalanma İçin Evrensel olarak Desteklenen Kodlar (Kalıtım Mekanizması Kullanılmadan) (CSS Kullanımı İle)

 

Örnek Tablo 3' ün IE 6.02 SP2 deki görünüşü:

Porselen Çay Takımları

Cins Fiyat (YTL)
Çay Tabağı 10.00
Çay Fincanı 20.50
Sütlük 102.30
(Bu fiyatlara %15 KDV eklenecektir !)

 

Bu kodlar da aynı saf HTML kodları gibi tüm belge çözümleyicilerde desteklenmektedir. Burada görüntü özelliklerinin hem HTML 4.01 katı kuralcı spesifikasyonu hem de CSS kuralları ile uyumlu tek uygulama örneği ile karşı karşıyayayız. Hangi kod sisteminin tercih edileceği, yazarın seçimine bağlı olmasına rağmen, prensip olarak, HTML 4.01 spesifikasyonu kapsamında yapılabilecek çalışmalar için CSS terimlerine gerek olmadığı düşünülebilir. Yine de güncel eğilime uygun olarak tüm görüntü sağlamaya yönelik çalışmalar gibi burada da CSS öğeleri tercih edilebilir.

 

Bir Tabloda Hücrelerin Birden Fazla Sütun Kapsaması (colspan Niteliğinin Kullanımı) (Kalıtım Mekanizması Kullanılmadan)

 

Örnek Tablo 4 deki kodlar aşağıda verilmiştir:

 

Örnek Tablo 4 ün IE 6.02 SP2 deki görünüşü:

 

Malzeme Fiyatları

Malzeme Türü Stok Nr. Fiyat (YTL)
Adaptör 312-3 1.00
Anahtar (Stok Dışı Ürün) 10.50
Devre Kartı 322-16 100.30
(Bu fiyatlara %15 KDV eklenecektir !)

 

Kodların İncelenmesi : İkinci satırda sadece iki tane <td> bildirimi yapıldığı görülmektedir. Bunun nedeni, ikinci satırda bulunması gereken üç sütunun ilk ikisinin birleşmiş olması ve bu durumda, ikinci satırda sadece iki tane sütun kalmış olmasıdır. Bu kodlarda da hiç bir kalıtım mekanizması öngörülmemiştir. Bu tablonun kodları, salt HTML element ve niteliklerinden yararlanarak oluşturulmuştur.Sadece HTML 4.01 katı kuralcı kesin spesifikasyonu gereğince, tablonun sayfadaki yerleşimi için CSS terimleri kullanılmıştır.

Aynı tablonun tümü ile CSS terimleri kullanılarak oluşturulmuş versiyonu olan Örnek Tablo 5' in kodları aşağıda görülmektedir.

 

Bir Tabloda Hücrelerin Birden Fazla Sütun Kapsaması (colspan Niteliğinin Kullanımı) (Kalıtım Mekanizması Yok) (CSS Kullanımı İle)

 

Örnek Tablo 5' in kodları:

 

Örnek Tablo 5'in IE 6.02 SP2 deki görünüşü:

 

Malzeme Fiyatları

Malzeme Türü Stok-Nr. Fiyat (YTL)
Adaptör 312-3 1.00
Anahtar (Stok Dışı İmalat) 10.50
Devre Kartı 322-16 100.30
(Bu fiyatlara %15 KDV eklenecektir !)

 

 

Bir Tabloda Hücrelerin Birden Fazla Satır Kapsaması (rowspan Niteliğinin Kullanımı) (Kalıtım Mekanizması Yok) (Salt HTML)

 

Örnek Tablo 6 :

 

Örnek Tablo 6' nın IE 6.02 deki görünüşü:

 

Malzeme Fiyatları

Malzeme Türü Stok-Nr. Fiyat (YTL)
Adaptör Stok-Nr yok 1.00
Anahtar 10.50
Devre Kartı 322-16 100.30
(Bu fiyatlara %15 KDV eklenecektir !)

 

Kodların İncelenmesi: İkinci satırda sadece iki sütun bildirildiği görülmektedir. Bunun nedeni, birinci satırdaki ikinci sütunun bir alt satırdaki ikinci sütunu da kapsayacak şekilde satır aşımı açılımıdır (rowspan niteliği). Aynı işleve sahip bir tablonun kodları, CSS kuralları kullanılarak da oluşturulabilir. Bir çalışma örneği olarak bu tablonun yapılması çok öğretici olacaktır.

 

Kod Optimizasyonu Üzerine

 

Optimum, en uygun olan anlamında, kökenini latinceye kadar takip edebildiğimiz bir sözcüktür. Hemen her konuda optimum çözümlerin oluşturması gerekmektedir.

Optimal değerin anlamı, maksimum ve minimum değerlerin belirtilmesi ile daha iyi anlaşılabilir. Örnek olarak bir insanın soğuktan korunmak için giyinmesi gerekir. Burada olayın amacı, soğuktan korunmadır. Amacın tam gerçekleşmesi yani soğuktan tam korunma için, sonsuz kalınlıkta giysilere gerek duyulur. Bu maksimum kalınlık değeridir ve tam koruma sağlar, fakat acaba en uygun giysi kalınlığı bu mudur? Tam koruma için sonsuz kalınlıkta giysi insanın yaşam sınırları içinde gerçekleştirebileceği bir çözüm değildir. Bunun tam tersi de sıfır giysi olacaktır, bu sefer maksimum rahatlık sağlanacak fakat korunma sıfır olduğundan soğuktan donma ile karşı karşıya kalınacaktır.

Minimal ve maksimal çözümler gerçekçi olamayacağına göre, olaya optimum bir çözüm bulmak gerekmektedir. Optimal çözüm, minimumdan fazla, maksimumdan az kalınlıkta bir giysidir. Bu, soğuktan dondurmayacak fakat hareket yeteneğini engellemeyecek kalınlıkta bir giysidir. Bu durumda, amacın optimal gerçekleşme düzeyi, donma olayının engellenmesi ve hareket yeteneğinin kaybedilmemesi gibi iki kısıt sağlandıktan sonra gerçekleşebilen bir düzeydir.

İlk bakışta, optimal çözümün sübjektif bir değer olabileceği düşünülebilir. Eğer, olayın tüm amaç ve kısıtları matematik modellerle açıklanabilirse, yani deterministik amaç ve kısıtlarla çalışma olanağı bulunabilirse, olay son derece deterministik olarak modellenebilir. Uygulamalı matematiğin çalışma alanlarından biri de, optimizasyon alanıdır.

Optimasyon kuramı, burada incelediğimiz tablo kodlarına uygulanırsa, burada amaç, kod miktarının minimizasyonu, kısıtlar ise, kodları destekleyecek belge çözümleyicilerdir. Bir kodun miktarı, destekleyecek belge çözümleyicilerinin sayısına bağlıdır. Eğer hepsinin desteği aranırsa, maksimum kod büyüklüğüne ulaşılır. Eğer sadece birisinini desteği yeterli görülürse, minumum kod büyüklüğüne ulaşılır.

İndirilme süresi uzun olan sitelerden, okuyucunun kaçma olasılığı yüksektir. Bu nedenle, özellikle tablolar ile çalışılırken uzun tablo bilgileri içeren sitelerin kod optimizasyonuna gitmeleri ve optimal çözümler için bazı belge çözümleyicilerin desteğinden vazgeçmeleri kabul edilebilir bir yöntem olabilir.

Bir Web sayfası, sunucu bilgisayardan, istemci bilgisayara iletişim ile indirildiğinden ve uzun kodun indirilme süresi de yüksek olduğundan, uzun kod, verimsiz bir iletişimin nedeni olur. Bu durumda, oluşturulan kodların en çok kullanılan belge çözümleyicilerin belirili çözünürlükleri için optimize edilmelidir. Yani oluşturan kodlarda aşırı genel destek aranmamalı, belirli belge çözümleyicilerinin desteği ile yetinilmelidir. Bu satırlar, çoğu Web sitelerinde rastlanılan, "Internet Explorer 600x800 çözünürlüğü için optimize edilmiştir" şeklindeki notları açıklayabilecektir.

Son bir bilgi olarak, tablo çalışmalarında, tablonun tüm değerlerini alamadan görüntü verdirmeyen ve veri tamamlama aşamasında istemci belge çözümleyicilerinin uzun süre görüntüsüz kalmasına neden olan tablo kodlama tipleri yerine, aşamalı değerlendirme yapabilecek koşullara sahip olan yani bilgilerin indirildikçe görüntülenmesine olanak veren kodlar tercih edilmelidir.

 

Tablo Bilgilerinin İleri Yöntemlerle Değerlendirilmesi

 

HTML 4.01 kesin spesifikasyonu tablo bilgilerinin serializasyonu adı ile, bu bilgilerin bir tür veri temeli sorgulama diline yakın olanaklar ile bilgi toplanmasına olanak sağlayan bazı mekanizmalar sağlamaktadır. Bu mekanizmalar, <th> ve <td> elementlerinin axis ve scope niteliklerinden yararlanılarak geliştirilebilir. Bu konuda, bu niteliklerin HTML olayını biraz zorlamak anlamına geldiğini ve bu niteliklerin belge çözümleyicilerdeki desteğinin zayıf olduğunu belirtmek gerekmektedir. Tablo bilgilerinin analizi ve yorumlanması için, uygun script dilleri ve veri temelleri kullanımı, hem programlama açısından daha sorunsuz, hem de sonuca ulaşmak açısından daha güvenli olacaktır.

 

Tablo Örneklerinin Uygulanması

 

Burada görülen tablo örnekleri, kod yazımı ile gerçekleştirilebilen HTML yetkinliğinin bir örneği sayılabilir. Burada görüldüğü gibi, bu derslerde ulaşılan bilgi düzeyi ile her türlü tablo tasarımı sorunsuzca yapılabilir.

Tablolar en doğru kullanım amacı olarak, tablolarda verilmeleri gerekli olan bilgilerin belirtilmesinde kullanılmalıdır. Tabloların sayfa tasarımı amacı ile kullanımı, CSS Düzey 2.1 de sağlanan yer tutma kolaylıklarından dolayı artık gerekli sayılmamaktadır. Kullanıcılar CSS Düzey 2.1 de yetkinleştikçe, tabloları sayfa düzenleme amacı ile kullanmak için daha az gereksinme duyacaklardır. Buna rağmen istendiğinde tabloların sayfa tasarımı amacı ile de kullanımı da hoşgörü ile karşılanmalıdır.

 

 

 

 

validate in W3C !Valid HTML 4.01!