Web Dizayn: Tablolama İpuçları (HTML)

Tablolama işinin bir web sayfasının iskeleti olduğunu söyleyebiliriz. Görsel anlamda sayfadaki öğeleri konumlandırmak primer ihtiyaç olduğuna göre de işin en önemli kısmıdır. Çok pratik ipuçlarıyla harika işler çıkarabilirsiniz, bunun için ihtiyacınız olan 2 şey notepad ve spacer.gif adı vereceğimiz şeffaf 1x1 piksellik resimcik.

Eski usülde hazırlayacak olursanız, yani CSS den anlamam ben arkadaş diyorsanız bunun için basit HTML den faydalanacaksınız demektir. Bu tutorial da HTML üzerine olacak.
Bunun için üzerinde çalışacağımız kod <table>

Tarayıcıdan tarayıcıya görüntü HTML kodları sözkonusuysa fark eder. Yani CSS deki gibi herşey net ve kesin değildir, ve özellikle tablolama yaparken yaptığınız işi birçok tarayıcıda kontrol etmek gerekebilir. Firefox, IE, Google Chrome vs..

<table> kodundan sonra dikey/yatay kolon dizimi için bilmemiz gereken görsel sıralama şudur..

<tr> (yatay bir blok yaratır)
<td> (yarattığınız üstteki blok içine yerleşir)

kısaca kabaca görünüm şudur:

<table border="1"> <tr> <td>1.SIRA, 1.HÜCRE</td> <td>1.SIRA, 2.HÜCRE</td> </tr> <tr> <td>2.SIRA, 1.HÜCRE</td> <td>2.SIRA, 2.HÜCRE</td> </tr> </table>

"TR" için YATAY, "TD" için DİKEY etiketi verebiliriz.

1.SIRA, 1.HÜCRE	1.SIRA, 2.HÜCRE
2.SIRA, 1.HÜCRE	2.SIRA, 2.HÜCRE

Hücrelerin birer TD olduğunu görüyoruz. İstediğimiz kadar parça eklememiz mümkün TR etiketleri içindeki TD sayısını arttırak. Bilmemiz gereken bir nokta da bu TD parçalarını belli oranlarda konumlarda ve belirli büyüklüklerde tutmak. Bunun için yapmamız gereken olay gayet basit:
<td width="20" align="left">
dedik ve 20 piksel gelişliğinde sola sabitledik.. Şimdi.. Öğneğin bunun sağındaki pencereyi de sayfanın geri kalan tümünü kaplasın istiyoruz.
<td width="%100" align="left">
dedik ve sayfanın tümünü kaplayan birbaşka TD yarattık. Yüzdesini azaltarak değişik oranlar yaratmak da mümkün.

HTML tablolama işin gerçeği hiç de verimli bir tablolama çeşidi değildir, ve günümüzde artık CSS ile yarışamaz hale gelmiştir. Gerek tarayıcılar arası tutarsızlığından, gerek de CSS deki gibi herhangi bir class yaratmaksızın bir sürü çöp kod yazmak zorunda kalıyor olmamızdan ötürü. Ama yine de web sayfalarının temeli HTML dir ve bu böyle de kalacaktır, gayet de kullanılmaktadır.
Şimdi.. Bahsettiğimiz "class" sızlık bizim "table" kodlarıyla yalnızca belli oranlarda parçalanmış ve komplike olmayan dikey ve yatay kolonlar yaratmamıza yardımcı oluyor. Demek istediğimiz şu ki CSS bilmiyorsanız çok komplike boyutta konumlandırılmış elementlerden oluşan bir web sayfası oluşturmak pek mümkün değil, ama yine de bir yolu var..

Bu kısmı ciddiye alırsanız CSS bilmeden sayfa yapabileceksiniz. Başta bahsettiğimiz spacer.gif resimciği de bu noktada gerekebilir. CSS i tablo bazında vermsiz yapan bir noktadan söz edeceğim şimdi..

TR ler yatay.. TD ler dikey dedik. TD ler TR içinde olur. Şimdi komplike bir sayfa yaratacağız, ancak bu noktadaki bizi zora düşüren durum: Mesela 2 sıralı, 1. sırasında 3 kolon, 2. sırada da 4 kolonlu bir tablo yaratacağız zaman karşımıza çıkıyor. TD yani yatay düzlemde yanyana dizelen kolonlar ayrı ayrı sıralarda mutlak şekilde üstüste gelir.

1.SIRA, 1.HÜCRE	1.SIRA, 2.HÜCRE	1.SIRA, 3.HÜCRE
2.SIRA, 1.HÜCRE	2.SIRA, 2.HÜCRE	2.SIRA, 3.HÜCRE	2.SIRA, 4.HÜCRE

Kötü tarafları:

• TD alan boş kalmıştır ve işlevsizdir.
• Alt sıradaki bir TD'ye arka plan yerleştiremeyiz, lakin hemen üstündekininki gözükecektir.

Komplex bir yerleşim yaratmak istiyorsak bunun için NESTED (içiçe geçmiş) tablolar yaratmamız gerekir ve çok çok kolay bir çözümü vardır.
Yapmanız gereken tek şey TD lerin içlerine yeni TABLE lar yerleştirmektir

<table border="1">
<tr>
<td><table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table></td>
<td>1.SIRA, 2.HÜCRE</td>
</tr>
<tr>
<td>2.SIRA, 1.HÜCRE</td>
<td>2.SIRA, 2.HÜCRE</td>
</tr>
</table>


1.SIRA, 1.HÜCRE	A B C D
2.SIRA, 1.HÜCRE	2.SIRA, 2.HÜCRE

Belki üstüste yerleşen harika bir CSS tablosu yaratmıyoruz böylece, ancak bu kabaca basit ve kolay bir çözümdür.

---

Bahsettiğim spacer.gif 'e gelince: şeffaf 1x1 boyutlarında bir resimdir. Şeffaflık sadece "png" ve "gif" formatlarıyla mümkündür. ancak gif daha az yer kapladığı için tercih ediyoruz.
Bu resmi ÜST sıralardaki TD'lere yerleştirerek boş tablo alanları yaratabiliriz. Bunun için resmi TD içine yerleştirin ve nitelikleriyle (attribute) gereken ayarlamaları yapın.

<table border="1">
<tr>
<td><img src="spacer·gif" width="100" height="40"></td>
</tr>
</table>

100 piksel genişliğinde, 40 piksel yüksekliğinde boş bir tablo alanı yarattık.
Ne işe yarar derseniz, yapacağınız dizayn gereği resmin olmadığı ancak bir arka plana ihtiyaç duyulan durumlarda çok işe yarar diyorum ve okuduğunuz için teşekkür ederek son olarak bunu örnekliyorum.

<table border="1" background="bir_büyük_arkaplan_resmi·jpg">
<tr>
<td background="bir_küçük_arkaplan_resmi·jpg"><img src="spacer·gif" width="100" height="40"></td>
</tr>
</table>