TABLO OLUŞTURMAK

       Bir tablo oluşturmak için gerekenleri, bu sayfada detaylı bir şekilde göreceğiz. Bunun için Not Defteri uygulamasını açın ve yeni bir sayfa oluşturup aşağıdaki kodlamayı yaparak çalışma klasörünüz içine tab.htm olarak kayd edin.


<HTML>
<HEAD>
<TITLE>TABLO OLUŞTURMA</TITLE>
</HEAD><BODY>
<B>Basit Bir Tablo</B>
<BR><BR>
<TABLE BORDER="1">
<TR>
<TD> ilk sıradaki ilk hücre</TD>
<TD>ilk sıradaki ikinci hücre </TD>
</TR>
<TR>
<TD>ikinci sıradaki ilk hücre </TD>
<TD> ikinci sıradaki ikinci hücre </TD>
</TR>
</BODY>
</TABLE>
</HTML>


Şimdi de İnternet Explorer uygulamasını kullanarak tab.htm belgesini açın. Sonuç aşağıdaki resimde görüldüğü gibi olmalıdır.

Basit Bir Tablo


ilk sıradaki ilk hücre ilk sıradaki ikinci hücre
ikinci sıradaki ilk hücre ikinci sıradaki ikinci hücre


Şimdi buradaki her komutun ne işe yaradığına bakalım. Çizilen her tablo < TABLE > komutuyla başlamalı ve < TABLE > komutuyla bitmelidir. Tabloyu oluşturan her parametre satırı ise < TR > ve < /TR > komutları arasına yazılmalıdır. Bu komutların herbirinin kendine has ek ve parametreleri mevcuttur.

Biz burada Table komutuna ek olarak BORDER parametresini kullandık, bu tablo sınırının genişliğini belirler ve burada verilen değer 1 olarak belirlenmiştir. Bu parametreye bundan daha yüksek değer de verebilmek mümkündür. Siz burada farklı değerler kullanarak denemeler yapın ve sonuçları gözlemleyin.

Renkli Tablolar:

Şimdi de tablomuza bir miktar renk eklemeyi deneyelim. Bunun için bir önceki kodlamadan faydalanacağız, ama hepsini yeni baştan yazmamıza gerek yok. Not defteri uygulamasını kullanarak tab.htm belgesini açın. Daha sonra bunu "Farklı Kaydet" seçeneği yardımıyla 02.htm adı altında tekrar kayd edin. Böylelikle aynı dosyadan farklı iki tane elde etmiş olduk. Şimdi bu ikinci belge üzerinde bazı değişiklikler yapacağız.

Şimdi aşağıda verilen kodlamayı inceleyin. Elinizde ki kodlamada olmayan değişiklikleri hemen fark edeceksiniz. Öncelikle tablo ismi farklıdır. Bunun dışında TR ve TD komutlarına BGCOLOR parametresi eklenmiştir. Sizde bu değişiklikleri yeni kodlamanız üzerinde gerçekleştirin. Sonucu kaydedin ve belgeyi Browser ile açarak ortaya çıkan görünümü inceleyin, sonuç aşağıdaki gibi olmalıdır.

Önce kodlama sayfasının görüntüsü.


<HTML>
<HEAD>
<TITLE>
Renkli Bir Tablo </TITLE>
</HEAD>
<BODY>
<B>
Renkli Bir Tablo</B>
<BR><BR><BR> <TABLE BORDER="1">
<TD BGCOLOR="yellow">
ilk sıradaki ilk hücre</TD>
<TD bgcolor="green">ilk sıradaki ikinci hücre</TD>
</TR> <TR>
<TD bgcolor="red">ikinci sıradaki ilk hücre</TD>
<TD BGCOLOR="white">ikinci sıradaki ikinci hücre</TD>
</BODY>
</TABLO>
</HTML>



Şimdi ise yaptığımız kodlamanın sonucunu hep birlikte görelim.


ilk sıradaki ilk hücre ilk sıradaki ikinci hücre
ikinci sıradaki ilk hücre ikinci sıradaki ikinci hücre



Bu yeni kodlamada BGCOLOR komutunu kullandık, ayrıca yanına ingilizce renk kodları olan, BLUE, RED, YELLOW gibi bazı parametreler de ekledik. BGCOLOR komutu TR, TD veya TABLE komutlarıyla beraber kulanılır. Tek başına kullanılırsa tüm arka plan rengini belirler, yani tüm hücre o renkte olur. Bu komut TR ile beraber kullanıldığında sadece o satır içindeki hücrelerin arka plan rengini belirler. Her satırdaki hücre için farklı bir renk kulanmak mümkündür.

Eğer BGCOLOR komutu TD ile beraber kullanılırsa, o zaman sadece tek bir hücrenin arka plan rengini belirler. Her hücre için ayrı bir renk kullanmak mümkündür. Buradaki örnekleri dikkatle inceleyin ve parametreleri uygun bir biçimde değiştirerek denemeler yapın.


Renkli Tablolar 2:


Şimdiki konumuz ise, tablolar üzerinde detaylı değişiklikler.

a) Çerçeve Rengi:

Öncelikle burada verilen sayfa kodunu Not Defterini kullanarak yeniden yazın. Bu sayfa kodunu tablo1.htm olarak kayd etmeyi unutmayın. Burada daha önce kısaca bahsettiğimiz bir kod var. TABLE komutu ile birlikte kullanılan BORDERCOLOR adlı bu ekin görevi tablolarınızda kulllanacağınız çerçevelerin rengini belirlemektir. Biz burada yeşil renge denk gelen GREEN değerini kullandık, ama bu değer isteğinize göre değiştirilebilir. Şimdi aşağıdaki kodları <BODY> ... </BODY> kodları arasına yerleştirin.

<table border="1" bordercolor="green">
<tr>
<td> hücre 1 sıra 1 </td>
<td> hücre 2 sıra 1 </t>
<td> hücre 3 sıra 1 </td>
</tr>
<tr>
<td> hücre 1 sıra 2 </td>
<td> hücre 2 sıra 2 </td>
<td> hücre 3 sıra 2 </td>
</tr>
<tr>
<td> hücre 1 sıra 3 </td>
<td> hücre 2 sıra 3 </td>
<td> hücre 3 sıra 3 </td>
</tr>
</table>


Sonuç aşağıdaki gibi olmalıdır.

hücre 1 sıra 1 hücre 2 sıra 1 hücre 3 sıra 1
hücre 1 sıra 2 hücre 2 sıra 2 hücre 3 sıra 2
hücre 1 sıra 3 hücre 2 sıra 3 hücre 3 sıra 3

b) Metin Uzaklığı:

Aşağıda göreceğiniz ikinci sayfa kodlamasını da yine Not Defteri ile yazmayı ve tablo3.htm olarak kayd etmeyi unutmayın. Bu kodlamada da yeni bir ek mevcut. CELLPADDING adlı bu ekin görevi tablolara girilen metinlerin hücre çerçeveleriyle arasındaki mesafeyi belirlemektir. Burada kullanılan değer arttıkça mesafede artar ve dolaysıyla bu durum tüm tablonun büyümesine sebep olur. Sonuçları tablo3.htm sayfasının açılması sonucunda kendinizde görebilirisiniz, metin ve hücre arasındaki mesafe ilkine göre çok daha fazladır.


c) Hücre Mesafesi:

İkinci sayfa kodunda kullanılan bir diğer ek ise CELLSPACING adını taşımaktadır. Bu ek hücrelerin arasındaki mesafeyi ayarlamakta kullanılır. Buna "0" (Sıfır) değeri verildiğinde, hücre çerçeveleri arasındaki mesafe tamamen kalkar. Sonuç olarak daha büyük görünenn hücreler elde etmiş oluruz.


d) Tablo Boyutları:

       Bu kısımda size tablo boyutlarını belirtmekte kullanılan dört ekten bahsedeceğiz. Bu eklerden ilki olan WIDTH her zaman table komutuyla birlikte kullanılır. Bu ek'e iki farklı türde değer vermek mümkündür. Bu değerlerden ilki "%" bazında, diğeri de "piksel" bazında olabilir. Eğer "100% değeri verirsek o zaman tablo tüm sayfayı kaplayacak genişlikte çizilecektir. Buna karşın, eğer piksel bazındaki değeri "200" olarak belirlersek, o zaman genişlik bu miktarda olacaktır. WIDTH eki TABLE komutuyla birlikte kullanıldığında hücre genişliğini belirlemeye yarar. İkinci ek olan HEIGHT ise TABLE komutuyla birlikte kullanıldığında tablo yüksekliğini belirlemeye yarar. Bu komuta da hem %, hemde piksel bazında değer verebilmek mümkündür. Üçüncü ek olan ALIGN, TR, TD ve TABLE komutlarıyla birlikte kullanılır. Bu ekin görevi, tablonun yada hücrelerin yatay hizalandırmasını yapmaktır. Burada CENTER değeri verilerek hizalamanın merkeze doğru olması sağlanmıştır. Dördüncü ve son ek olan VALING dikey hizalandırma işlemi için kullanılır. Bu eki hem TR hemde TD komutlarıyla birlikte kullanmak mümkündür. Burada değer olarak "MIDDLE" vererek hizalandırma işleminin ortaya doğru yapılmasını sağlıyoruz. Burada verilen kod örneklerini yazıp çalıştırarak ve değerlerde değişiklikler yaparak etkilerini kendiniz de yakından inceleyebilirsiniz. Şimdi kodlama zamanı. Aşağıdaki kodları kopyalayarak çalışma sayfanıza yapıştırabilirsiniz ama kodlamayı kendinin yazarak yaparsanız daha çabuk öğrenmiş olursunuz.

<table border="1" bordercolor="green" cellpadding="18" cellspacing="0">
<tr>
<td colspan="2" aling="center"> Büyük Hücre </td>
<td> hücre 3 sıra 1 </td>
</tr>
<tr aligh="center">
<td>hücre 1 sıra 2</td>
<td>hücre 2 sıra 2</td>
<td>hücre 3 sıra 2</td>
</tr>
<tr valign="middle">
<td>hücre 1 sıra 3</td>
<td>hücre 2 sıra 3</td>
<td>hücre 3 sıra 3</td>
</tr>
</table>


Ve kodlamamızın Explorer'deki görünümü;


Büyük Hücre hücre 3 sıra 1
hücre 1 sıra 2 hücre 2 sıra 2 hücre 3 sıra 2
hücre 1 sıra 3 hücre 2 sıra 3 hücre 3 sıra 3


Burada, adres çubuğundaki adreslerin değişik olması, açılan sayfa adlarının sizin kayd ettiğiniz sayfa adı dışında olması dikkatinizi çekmiş olabilir. bunun nedeni, sayfa adlarını benim başka ad olarak kayd etmem. Sizinkiler ise benim belirlediğim diğer adlardır.

       Ve böylece Tablo Tasarımınıda az çok öğrendik. Siz, size verilen kodlar üzerinde değişiklikler yaparak kendi tasarımlarınızı geliştirebilirsiniz. Örneğin herhangi bir tablo tasarım kodlarının Tag'lerini kopyalayarak Yeni bir çalışma sayfasına kopyalayabilir ve bu sayfa üzerinde değişiklik yapabilirsiniz. Böylece asıl kodlama değişmeden yeni tasarımlar üzerinde çalışabilirsiniz. Unutmayın,sadece ne istediğinizi düşünün, deneyin ve bunu görün.



Bu sayfanın hazırlanışında kaynak olarak" Herkes İçin Bilgisayar " Seperatörlerinden yararlanılmıştır.


Ana Sayfa