Tablo (table) Kullanarak Sayfa Tasarımı Yapmak

Bu dersimizde web sayfamızına genel tasarımını(sayfa dizaynı) nasıl yapacağımızı göreceğiz.

Yeni başlayanlar için sayfa tasarımının en kolay yolu table(tablo) kullanmaktır. Yazı yazmak için Word Programını kullandıysanız tablo mantığı size yabancı gelmeyecektir.

Birde Div ve CSS kullanarak sayfa dizaynı yapma yöntemi vardır. Buna ilerdeki derslerimizde değineceğiz.

Tablo dediğimiz şeyin bir örneği aşağıdadır.

1. satır sol hücre
(Sitenizin amblemi)
1. Satır orta hücre1. Satır sağ hücre
2. Satır sol hücre
(Sitenizin menüsü)
2. Satır Orta Hücre
(Sayfadaki Bilgiler)
2. Satır sağ hücre
3. Satır sol hücre3. Satır orta hücre
Sitenizin emaili vs.
3.satır sağ hücre


Bunu sayfamızın boyutları kadar büyüttüğümüzü düşünün. Sayfanızın taslağı hazır değil mi?

Sayfa tasarımını bir kere öğrendinizmi gerisi kolay. Sayfanız bir kere ortaya çıktıktan sonra öğrendiklerinizi rahat rahat uygularsınız.

Şimdi önce bu tabloyu nasıl yaptığımızı görelim.
Sonra bu tabloyu sayfa tasarımında nasıl kullanacağımıza bakarız

Tablomuzun başladığını <table> etiketi ile bildiriyoruz. Bittiğini de </table> etiketiyle.

<table>

</table>

Şimdi tablomuza satır ekleyelim.

Satırımızın başladığını <tr> etiketiyle bildiriyoruz. Bittiğini de </tr> etiketiyle.

<table>

<tr>

</tr>

</table>

Şu an satırımızın içine bir şey yazamayız. Satırımızın içinde hücre oluşturmak zorundayız.

Hücremizin başladığını <td> etiketiyle bildiriyoruz. Bittiğini de </td> etiketiyle.

<table>

<tr>

<td>

</td> 

</tr>

</table>

Şu an tek satırlı, tek hücreli bir tablomuz oldu. Tablomuzu görelim isterseniz.

Hücre

Şimdi bu satırımıza bir hücre daha ekleyelim

<table>

<tr>

<td>

</td> 

<td>

</td> 

</tr>

</table>

Bir satırlık iki hücrelik bir tablomuz oldu.

1. hücre2. hücre

Tablomuza yeni bir satır eklemek için aynı işlemleri tekrarlayacağız.
Yalnız şurayı unutmayın: Satırlarınızdaki hüçre sayısı eşit olmalı. Yoksa sayfanız yamulur.

Yukardaki <tr> ile başlayan </tr> ile biten satırımızı kopyalayıp, satırının bittiği </tr> etiketinden sonraya ekleyelim. Böylece iki satırlı bir tablomuz olsun.

<table>

<tr>

<td>

</td> 

<td>

</td> 

</tr>

<tr>

<td>

</td> 

<td>

</td> 

</tr>

</table>

1. Satır 1. hücre1. satır 2. hücre
2. Satır 1. hücre2. satır 2. hücre

Bu kodları bu şekilde alt alta yazmakla yan yana yazmak arasında fark yoktur.
Aşağıdaki diziliş satır ve hücreleri daha rahat görmenize yardım edecektir.

Ben aşağıdaki tabloya bir satır daha ekledim. Ayrıca her satıra birer hücre daha ekledim.
Böylece tablomuz yukardaki örnek tablomuzda gördüğünüz gibi 3 satırlı bir tablo oldu.
Tablomuzun her satırında da 3 hücre var.

İnternette gördüğünüz Web Sitelerinin çoğu bu tasarımdadır.

<table>
<tr>  <td>  </td>     <td>  </td>    <td>  </td>  </tr>
<tr>  <td>  </td>
    <td>  </td>    <td>  </td>  </tr>
<tr>  <td>  </td>     <td>  </td>    <td>  </td>  </tr>
</table>

Siz bu tabloyu daha önce verdiğimiz HTML sayfası ana kodlarında <body> ve </body> etiketleri arasına yerleştireceksiniz.

Fakat bu haliyle yerleştirirseniz herhangi bir şey göremezsiniz.
Çünkü tablomuzun border yani kenar çizgi kalınlığını belirtmedik.

Bunun için en üstteki <table> tablo başlangıç etiketinin içerisine border=1 yazmalısınız. Bu durumda tablomuzun border kalınlığı 1 olur.

<table border=1 >

Tablomuzun border rengini ayarlayalım. Mesela mavi yapalım.

<table border=1 >

<table border=1 bordercolor=blue >

Şimdide tablomuzun genişliğini ve yüksekliğini ayarlayalım.
Mesela tablomuzun genişliği ekran genişliğinin yarısı kadar olsun. Yüksekliği de ekran yüksekliğinin yarısı kadar olsun.

<table border=1 bordercolor=blue width=50%  height=50%>

Tablo genişlik ve yüksekliklerini piksel olarak da verebiliriz.
Aşağıda genişliği 500 piksel, yüksekliği 300 piksel olan bir tablo var.

<table border=1 bordercolor=blue width=500  height=300>

Piksel bilgisayarda kullanılan bir ölçü birimidir.

Ekranımızın genişlik ve yüksekliğini belirleyen bilgisayarımızın çözünürlüğüdür.

Ekranımızın çözünürüğü 800 x 600 ise genişlik 800 piksel yükseklik 600 piksel demektir.
Aynı şekilde çözünürlük 1024 x 768 ise genişlik 1024 yükseklik ise 768 piksel demektir.

Fakat kenarlardan biraz kayıplar olur. Tablo genişliğini tam 1024 yaparsanız web sayfanız ekranın biraz dışına taşar. Bu sebeple de altta kaydırma çubuğu belirir.

Hücrelerin genişlik ve yüksekliklerini ayarlamak için de <td> hücre başlama etiketinin içerisine aynen yukarda olduğu gibi genişlik ve yükseklik kodlarını yerleştirebiliriz.

Hücremizin genişliği tablomuzun genişliğinin yarısı kadar olsun. Yüksekliği de tablomuzun yüksekliğinin yarısı kadar.

<td width=50%  height=50%>

Hücrenin genişlik ve yüksekliğini aşağıdaki gibi piksel olarak da verebiliriz

<td width=200  height=300>

Bu derste öğrendiğiniz bilgileri uygulamaya çalışın. Sayfanızın tasarımını ortaya çıkarmaya çalışın. Önümüzdeki derste bu konuya devam edeceğiz.