TabLo Yapımı

Html de GitGide Sanırım iLerliyoruz . KodLarLa ne kadar çok uyguLama yaparsak o Kadar başarıLı oLuruz. ( Deneyim SöyLüyor Bunu ) ) Bir önceki dersimizde Resim ekLemeyi ve Link Vermeyi ve diğer Temel KodLarı Öğrendik. Sanırım Basitçe resimlerden ve Linklerden oLuşan Bir Sayfayı Yapabildik Diye Düşünüyorum.. Bugünde TabLo Yapımını ÖğreneLim..

Başta şu soruyu sorayım size ? ” Yazı iLe Resmi Öğrendiğiniz KodLarLa Yan Yana Hiç KoyabiLdiniz Mi?”
Sanırım Hayır Cevabı aLdım :d O zaman Burda Table KullanabiLiriz Diyorum ve anLatmaya başLıyorum…

Tablo için kullanacağımız temel etiketLer aşağıdaki Gibidir…

PLAIN TEXT

HTML:

  1. Tablo oluşturmak için : <table> </table>

  2. Yatay hücre oluşturmak için : <tr>

  3. Dikey hücre oluşturmak için : <td>

Temel etiketleirmizi Öğrendik Peki 6 Hücreli Bir TabLo yapmak isTersek Nasıl Yaparız Diye Sorarsanız. Ahanda Aşağıdaki Gibidir ;-)

PLAIN TEXT

HTML:

  1. <table border=“1”><tr> <td>Birinci sırada Hücre1</td> <td>Birinci sırada Hücre2</td> <td>Birinci sırada Hücre3</td> </tr><tr> <td>İkinci sırada Hücre1</td> <td>İkinci sırada Hücre2</td> <td>İkinci sırada Hücre3</td></tr></table>

BunLarı html sayfanızda UyguLayınca Göreceksiniz Ki Hakketen oLdu D

Şimdi geLdik iÇin JanJanLı kısmına ;

Hücremin içi renkli olsun istiyorsak ; bgColor Kodunu ekLiyoruz..
Kod:

PLAIN TEXT

HTML:

  1. <table><tr><td bgcolor=“red”>kırmızı hücrem oldu</td></tr></table>

Hücremizin iÇine Resim istiyorsak ; BackGround Kodunu ekLiyoruz..
Kod:

PLAIN TEXT

HTML:

  1. <table><tr><td background=“deneme.gif”>Heeyy burada kablumbiklerim vaarr</td></tr></table>

Hücremizin Kenar KalınLığını değiştirmek iÇin ; BoRder Kodunu kuLLanıyoruz..
Kod:

PLAIN TEXT

HTML:

  1. <table border=“10”><tr><td>kenarı kalın oldu</td></tr></table>

Hücremizin Kenarlığını RenkLi yapmak iÇin ; BorderColor Kodunu Kullanıyoruz.
Kod:

PLAIN TEXT

HTML:

  1. <table border=“10” bordercolor=“green”><tr><td>kenarını yeşil yaptım</td></tr></table>

Hücremizin iÇindeki yazı Sağa dayaLı olması iÇin ; align=” ” Kodunu ekLiyoruz..
Kod:

PLAIN TEXT

HTML:

  1. <table border=“1” width=“150” height= “100”><tr><td align=“right”>MyDooM</td></tr></table>

TabLomdaki yanyana İki Hücreyi Birleştirmek isTiyorsam ; ColsPan Kodunu kullanıyoruz..
Kod:

PLAIN TEXT

HTML:

  1. <table border=“1”><tr><td>1</td><td>2</td><td>3</td></tr><tr><td colspan=“2”>4</td><td>5</td></tr><tr><td>6</td><td>7</td><td>8</td></tr></table>

TabLomdaki altaLta iki Hücreyi birLeştirmek iÇin ; RowSpan Kodunu kuLLanıyoruz..
Kod:

PLAIN TEXT

HTML:

  1. <table border= “1”><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td> rowspan=”2″>5</td><td>6</td></tr><tr><td>7</td><td>8</td></tr></table>

YazıLarımızın Hücre KenarLarına Değmemesi iÇin ; CeLLPadding Kodunu KuLLanıyoruz.
Kod:

PLAIN TEXT

HTML:

  1. <table border=“1” cellpadding=“15”><tr><td>Değmiyor</td></tr></table>

HücreLerimizin Etrafındaki Çerçevenin KaLınLığını değişmek iÇin; CeLLSpacing Kodunu Kullanıyoruz..
Kod:

PLAIN TEXT

HTML:

  1. <table border=“1” cellspacing=“15”><tr><td>Etrafında boşluk var</td></tr></table>

İşin JanJanLı Kısmıda Bu Kadar ) Bundan Sonrasıda Size KodLarı UyguLamak kaLmış. Zaten Temel Html KomutLarıIda Bitirdik sayıLır.. ;-)

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s