Tuesday, October 31, 2000

Tablolar

Tablolar, HTML sayfasinda listeler ve sablonlar hazirlamak disinda, resimleri ve metinleri sayfa içerisinde istenilen bölgelere yerlestirmek ve bunun gibi bir çok alanda kullanilirlar. HTML 3.2 ile birlikte pek çok yeni özellige kavusan ve daha görsel hale getirilen tablolar konusunu iyi ögrenen bir webmaster, hayalgücü ile tasarladigi "TÜM" sayfalari tablolar yardimi ile olusturabilir.<TR>,<TD>,<TH> ve bunlari kapatma taglariyla birlikte kullanilan <TABLE...> tag'inin genel kullanimi söyledir:

<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">

BORDER degiskenine verilecek 0 veya daha üstü bir deger tablonun kalinligini belirler. CELLPADDING degiskenine verilebilecek herhangi bir sayi, tablonun sinirlari ile tablo içerigi arasindaki mesafeyi, CELLSPACING ise hücreler arasindaki mesafeyi belirler. WIDTH ve HEIGHT degiskenleri bir yüzde degeri veya bir sayi olabilir. WIDTH=590 degeri verildiginde 640*480 çözünürlükte ekranin tüm genisligini kaplayacak bir tablo olusturulur. WIDTH=%50 degerini verildiginizde ise Web tarayiciniz o tablonun her zaman ekran genisliginin yarisini kaplamasini saglar.

<TABLE> tag'inin içerisinde kullanilan BGCOLOR degiskeni tablonun fon rengini tayin eder. X degeri geçen aylarda degindigimiz HEX kodlarindan (#FFFF00) veya renk isimlerinden (white, olive...) biri olmalidir. Tablonuz daha canli ve profesyonel görünsün istiyorsaniz, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak dösetebilirsiniz.

Gelelim tablonun olusturulmasina. Genel prensip sudur: <TABLE> tag'iyla tabloya basladiktan sonra her satiri olusturmak için <TR>, her sütunu olusturmak için ise <TD> tag'ini kullanmalisiniz. Aman bu taglari kullaniyorsaniz her satirin sonuna </TR> ve her sütunun sonuna </TD> tag'larinin koymayi unutmayin!

Bir diger durum da, herhangi bir hücrenin yanindaki iki ya da daha çok hücreyi enine ya da boyuna dogru içine almasidir ki bu islemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanilir. Örnegin 2 satir ve 2 sütunlu 1.tablonun olusturulmasi için asagidaki kodlara ihtiyaç vardir, bu kodlar ayni zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadir.

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>
<!---Bu kodlarla, çerçeve kalinligi 1, hücreler arasi boslugu 2, hücre ile yazi araligi 3 olan yeni bir tablo olusturuyoruz.--->
<TR><TH COLSPAN=2> <!---iki kolonu içine alacak, yazilar kalin olacak -->
<!--ve ortalanacak (yani baslik olacak) --->


Tablo Örnegi:

</TR></TD><TR><TD>
deneme1
</TD><TD> <!-- yeni bir kolona basliyoruz... -->
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> <!-- yeni bir kolona basliyoruz... -->
deneme4
</TD></TR></TABLE> <!-- tüm tag'lari kapatip tabloyu sonlandiriyoruz. -->


Eger renkli tablolar elde etmek isteseydik <TABLE .... ifadesinin yanina BGCOLOR="#FFFF80", <TD.. ifadesinin yanina ise BGCOLOR="#000080" eklerini girmeniz gerekecekti.

Yazarin izni ile http://draskin.150m.com sitesinden alinmistir

No comments: