7 Şubat 2014 Cuma

HTML Dersleri 12 Tablolar 2

Merhabalar herkese. Bu dersimizde sözünü verdiğim gibi Tablolar konusuna devam edeceğim. İlk dersi okumadıysanız öncelikle buradan HTML Dersleri 11 Tablolar 1 okuyabilirsiniz.

Biz Bismillah diyelim ve kaldığımız yerden devam edelim.

Geçen dersimizde tablo oluşturmayı, satır ve sütunları yapmayı, oluşturduğumuz tabloyu boyutlandırmayı öğrenmiştik. 

Bu anlatımımda ise tablomuzu biraz daha detay özelleştirme işlemleri ile uğraşacağız.


Hücrelerin Kendi Arasında ve Hücre İçindeki Verinin Konumunu Ayarlama


İlk olarak hücreler arası ve hücre içi boşlukları nasıl ayarlayabiliriz buna bakalım.


  • Hücre çizgileri ile hücre içine yazılan yazının arasındaki mesafeyi, boşluğu table etiketine ait cellpadding parametresi ile gerçekleştiririz. 




Yani daha Türkçesi hücre içine yazdığımız yazı hücre duvarından ne kadar içeride olsun bunu ayarlarız. 


  • Burada şunu bilmekte fayda var bu parametre sadece soldan bir girinti oluşturmak için değildir alt ve üst hücre çizgileri içinde yazdığımız bir değerdir.


  • Hücreler arası boşluğu ise yine table etiketine ait cellspacing parametresi ile sağlarız.

Biraz daha özelleştirdiğimiz tablomuzu oluşturalım öyleyse.





Artık daha şık bir tablomuz var. Ben biraz uç değerler verdim ki farkı rahatlıkla görebilelim diyerekten.

Şimdi gelin birazda hücre içindeki yazımızın biçimlendirmesi ile uğraşalım.

Tablo içindeki yazının biçimlendirme işlemi için align veya valign parametrelerini kullanırız. 

Bu parametreler table etiketine, tr etiketine yada td etiketlerine uygulanabilir. 


  • Table a uygularsak bu tablonun konumunu belirler. 


  • Tr ye uygulanırsa satıra ilgili satıra uygulanır. 


  • Ama verinin konumunu ayarlamak için td ye uygulamamız gerekecektir. Buna dikkat etmeliyiz.

Align parametresini daha önceki derslerimizden zaten biliyoruz ama kısa tekrar edelim. 


  • Align yazının sağamı, solamı yaslanacak yoksa ortadamı duracak bunu belirleyen parametredir.


  • Değerleri right, left ve center şeklindedir.

Bize biraz yabancı olan parametremiz ise valign parametresi. 


  • Bu parametremiz ise hücre içindeki veriyi yukarı aşağı veya ortada olacak şekilde yani dikey konumunu ayarlamamıza yardımcı olur ve aldığı değerler top,middle,bottom dur.


  • Top üste, middle ortaya, bottom da aşağıya hizalar.

Bir önceki örneğimize devam edelim ve hücre içindeki veriyi biçimlendirelim.

Table etiketine ait align parametresi ile hücreyi sola yaslayalım. Daha sonra td etiketine ait align ile de yazılarımızı da orta konuma getirelim.




Artık dahada güzeliz. :D

Biraz daha hücre işlemleri ile uğraşalım. 

Mesela bazen öyle tablolar oluşturmamız gerekir ki bir satır altındaki 2 sütununda değerini karşılar. O zaman üst satırı bu alttaki iki satırı birleştirecek şekilde ayarlamamız gerekecektir. 


  • Bunu o hücreye ait td etiketinin colspan parametresini kullanarak yaparız.

  •         Satır içinde sütun birleştirme işlemini colspan ile yaparız.


Kullanımını görelim.




  • Bu birleştirme işlemini Sütun içinde satır birleştirme şeklinde yapacaksak bu sefer rowspan parametresini kullanırız.

Hücreler içinde başlık yazma


Şimdi tablo içinde bazı hücre içindeki verileri daha belirginleştirme işlemlerine bakalım.

Biz şimdi üst kısımları yani ad soyad diye belirttiğimiz satırların aslında daha belirgin olmasını isteyebiliriz çünkü bir nevi tablonun ilgili alanla ilgili başlıkları gibidir. 


  • Eğer tablo içinde bazı verilerin başlık şeklinde görünmesini istersek td etiketi yerine th etiketini kullanırız.



Bunu da bu şekilde halletmiş olduk. 

Bu dersimiz içinde bu kadar diyelim ve geri kalan tablo özelliklerini 3. dersimize bırakalım.Çalışan arkadaşlarıma kolaylıklar. Vesselam.

KONUNUN YAZARI NCFKR
DİĞER KONU ANLATIMLARI İÇİN TIKLA VE ÖĞREN

Hiç yorum yok:

Yorum Gönder