BLOGGER da HTML kodu ile Çizelge (Tablo) oluşturmak

         Blogger da blog larımızı yazarken, Çizelge (Tablo) yapmamızı sağlayacak araçlar yoktur. Bu nedenle Blog içerisinde bir Çizelge yapmak istersek ne yapmalıyız. Sadece tek bir olanağımız mevcut HTML kodu ile Çizelge yapmak. HTML kodu yazmak için de, yazı yazdığımız yerin sol kenarında HTML yazan yer mevcut. HTML butonunu tıklarsanız normal yazılarımızı yazdığımız görüntünün nasıl html koduna dönüştüğünü görebilirsiniz.

 HTML kodlarını yazıp, işimiz HTML kodları ile bittikten sonra Tekrar HTML butonunun yanındaki Oluştur butonuna basarsak HTML ile yazdığımız kodun normal yazım halini görüntülemiş oluruz. Aslında Oluştur kısmına yazdığımız her şey HTML kodlarına dönüşmektedir ki internet sadece HTML dili ile işlemleri anlıyor.
        Örnek olarak şimdi aşağıda görünen Çizelge (Tablo) yu oluşturalım, daha sonra bunu geliştiririz.

 

ÇİZELGE BAŞLIĞI

KONU	KONU ÖZELLİĞİ-1(Pişmiş)	KONU ÖZELLİĞİ-2	KONU ÖZELLİĞİ-3	KONU ÖZELLİĞİ-4
KONU ADI	DEĞER-1	DEĞER-2	DEĞER-3	DEĞER-4

HTML butonu na  tıkladığımızda çizelgenin kodlarını görebiliriz fakat biz html kodu ile açıkça yazalım. Sizde aşağıda yazdığım html  kodunu kopyalayıp. Bilgisayarınızda Yazı yazdığınız yerin  sol  üst tarafındaki HTML butonunu tıklar ve bu kodu html kod yazısının olduğu yere yapıştırırsanız, (HTML butonunun sol yanındaki) Oluştur butonuna bastığınızda yukarıdaki çizelgenin aynısını görebilirsiniz. Kopyalayacağınız kod aşağıdadır.

_______________________________________________________________________________

<table width="500" border="1">
  <caption>
    ÇİZELGE BAŞLIĞI
  </caption>
  <tbody>

    <tr>
      <td>KONU  </td>
      <td>KONU ÖZELLİĞİ-1</td>
      <td>KONU ÖZELLİĞİ-2</td>
      <td>KONU ÖZELLİĞİ-3</td>
      <td>KONU ÖZELLİĞİ-4</td>
    </tr>

    <tr>
      <td>KONU ADI</td>
      <td>DEĞER-1</td>
      <td>DEĞER-2</td>
      <td>DEĞER-3</td>
      <td>DEĞER-4</td>
    </tr>

  </tbody>
</table>

_________________________________________________________________________________

________________________________________________________________________________

               

                HTML kodunu incelediğimizde şu görülür. <caption> ile </caption> arasına yerleştirilen yazılar Tablonun başında Tablo başlığı olmaktadır. ilk <tr> yazısından sonra gelen <td> ile </td arasına yazılan yazılar tablonun ilk satırından ve sol kısmından başlayarak sonra gelen her <td> ile </td> arasındaki yazılar bir önceki yazının sağ yanına yerleşmektedir. Yani <tr> yazısı ile </tr> arasındaki her <td> yazı</td>  den kaç adet varsa o kadar kolon oluşmaktadır. yukarıda  <tr> </tr> arsında 5 adet <td> yazı</td> vardır o halde 5 adet kolon mevcuttur. 

       ilk <tr></tr> den sonra gelen ikinci <tr> </tr> bize yeşil ile gösterilen ikinci satırı ve arasındaki 5 adet <td> </td>  5 adet kolonunu göstermektedir.

     Örnek olarak Yukarıdaki mantığa göre 4 kolon ve 3 satırdan oluşan bir çizelge nasıl yapılacaktır. Aşağıdaki kodu kopyalayın sonra kendi bloğunuz da 

HTML tuşunu tıklayarak yazım yerine yapıştırın. Sonra tekrar Oluştur butonuna tıklayın.

________________________________________________________________________________
<table width="500" border="1">
  <caption>
    ÇİZELGE BAŞLIĞI
  </caption>
  <tbody>

    <tr>
      <td>KONU  </td>
      <td>KONU ÖZELLİĞİ-1</td>
      <td>KONU ÖZELLİĞİ-2</td>
      <td>KONU ÖZELLİĞİ-3</td>
    </tr>

    <tr>
      <td>KONU ADI</td>
      <td>DEĞER-1</td>
      <td>DEĞER-2</td>
      <td>DEĞER-3</td>
    </tr>

    <tr>
       <td>3cü satır, 1ci kolon</td>
      <td>3cü satır, 2ci kolon</td>
      <td>3cü satır, 3ci kolon</td>
      <td>3cü satır, 4ci kolon</td>
    </tr>

  </tbody>
</table>

________________________________________________________________________________
Oluştur butonuna tıkladığınızda görüntü aşağıdaki şekilde oluşacaktır.

ÇİZELGE BAŞLIĞI

KONU	KONU ÖZELLİĞİ-1	KONU ÖZELLİĞİ-2	KONU ÖZELLİĞİ-3
KONU ADI	DEĞER-1	DEĞER-2	DEĞER-3
3cü satır, 1ci kolon	3cü satır, 2ci kolon	3cü satır, 3ci kolon	3cü satır, 4ci kolon

Görüldüğü gibi kolon sayısını azaltım, fakat satır sayısını arttırdım. Sizde yukarıdaki mantıkla istediğiniz sayıda kolon ve satır yaratabilirsiniz. 

      HTML kodunun başında   <table width="500" border="1">     şeklinde bir kod vardır bu kod çizelge (tablo) yapmak için gereklidir "table" kodu web sayfasına tablo yaratıyorum demektir. "width="500"" bize tablonun genişliği 500 pixel olacaktır diyor. dilediğiniz şekilde 500 rakamını azaltıp çoğaltabilirsiniz. Böylece istediğiniz genişlikte tablo yapabilirsiniz. border="1" bize tablonun kenarlarının 1piksel olacağını söyler, eğer 0 olsaydı tablo kenarında çizgi olmazdı. Ya da 2 yazarsanız daha kalın bir kenarlık olacaktı. bir tablo <table.> </table> kodları arasına yazılır zorunludur.  <tbody> ile </tbody> de gereklidir tablo gövdesi anlamındadır. Bu kodlar olduğu gibi kalsın fakat diğer kodların rakamlarıyla dilediğiniz şekilde oynayabilirsiniz. Güzel bloglar yazmanızı dilerim.

_________________________________________________________________________________
BLOG ile ilgili DİĞER BAŞLIKLAR -Konuların üzerini TIKLA
_________________________________________________________________________________

• Blogger, Blog Sitesine nasıl ulaşılır 
• Blogger da Blog Başlığı ve Blog Adresi oluşturmak
• Blogger da Blog yazım kısmın tanıtımı
• BLOGGER da HTML kodu ile Çizelge (Tablo) oluşturmak
• Blogger da Site Haritasına rollover yapmak ve Tek sayfada Tüm konuları ve Konu Başlıklarını görüntülemek.
• Making rollovers in English to the Site map and view all topics and sub titles on one page on Blogger