7 Şubat 2014 Cuma

HTML Dersleri 11 Tablolar 1

Merhabalar dostlar. Yeni bir ders ile 5 10 dk lık beraber olma fırsatı oldu yine. Bu anlatımımda sizlere HTML de tablolar kavramını anlatmaya çalışacağım elimden geldiğince.

Çok fazla bir sıkıntısı olan kavraması zor bir konu değil. 

Öyleyse Bismillah diyelim ve başlayalım.

Tablolar deyince ne geliyor aklımıza önce bu sorunun cevabını vererek işe girişelim. Satır sütun şeklinde Web sayfanızda bir bölüm için veri tutacağımızı varsayalım. İşte bu işlem için biz HTML de tablolar kavramını kullanırız. İstediğimiz gibi özelleştirebildiğimiz bir yapıdır. 

Şimdi adım adım o yapıyı inceleyelim.

Bir HTML dosyasında bu dosyayı okuyacak tarayıcıya biz tablo yapıcaz şimdi dediğimiz ifade 

<table>...</table> 

ifadesidir.

Table etiketi ile bir tablo oluşturduk. Şimdi sırada bu tablo içinde verilerimizi tutacak satır ve sütunları oluşturmak var. 

Bir HTML dosyasında tablo içinde satır oluşturma işlemini 


<tr>...</tr>

 etiketi yapar. 

Bu satır üzerinde sütun oluştuma işlemini ise 

<td>...</td> 

etiketleri yapar.

En genel manada şudur.


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


Ne demek istediğim kodları toplu halde yazsam ve açıklasam daha iyi anlaşılacaktır. O zaman aşağıdaki kodları yazalım.



Açıklayalım öyleyse kodları.

  • <table> etiketi ile bir tablo oluşturacağımı söyledim.

  • Daha sonra hemen altındaki <tr> etiketi ile bir satır oluşturacağımı belirttim.


  • Daha sonrada <tr> altında yazmış olduğum 3 tane <td> etiketleri ile 3 tane sütun oluşturacağımı belirttim.


  • Bu işlem bitince </tr> ile artık bu satır ile işimin bittiğini söyledim. Sonraki <td> ler yeni bir satırın habercisi oldu.


  • Gerekli etiketleri gerekli yerlerde kapattım ve tablomu böylelikle oluşmuş oldu.


Şimdi <table> etiketi içinde border parametresine dikkat edelim. 

Bu parametre tablo kenar çizgilerinin kalınlığını belirler. Eğer bu parametre ile tablo kenarlığının boyutunu belirlemez isem tablomuz çizgileri görünmeden oluşacaktır çünkü border ın varsayılan değeri 0 dır.




Tabi tablomuzu biçimlendirmenin pek çok yolu var. Bunlardan biri yine <table> etiketine ait frame parametresi.

Tablonun sınır çizgilerini border ile belirlediğimizde hepsi belirgin bir şekilde görünürdür. 

Ama biz daha değişik kompozisyonları frame parametresi ile oluşturabiliriz.

Sadece bir tanesini anlatayım diğerlerinin ne işe yaradıklarını verip geçelim.

Frame ile kullanabileceğim bir özellik above dur. Bu özellik, bu değer sadece üst sınır çizgisinin görünmesini sağlar.







above: Sadece hücre üstlerindeki sınır çizgilerini gösterir.
below: Sadece hücre altlarındaki sınır çizgilerini gösterir.
vsides: Sadece düşey sınır çizgilerini gösterir.
hsides: Sadece yatay sınır çizgilerini gösterir.
rhs: Sadece sağ düşey sınır çizgilerini gösterir.
lhs: Sadece sol düşey sınır çizgilerini gösterir.
box: Tüm sınır çizgilerini gösterir.
border: Tüm sınır çizgilerini gösterir.
void: Sınır çizgilerini göstermez.

Bunlarıda böylece vermiş olalım.

Bir diğer parametremiz ise rules parametresidir. Buda yine sınır çizgileri ile ilgili durumlarla ilgilenir.

Kullanımı:

<table rules="rows">

şeklindedir.

Bu parametre ile de şu değerleri kullanabilirsiniz.

rows: Sadece satır çizgilerini gösterir.
cols: Sadece sütun çizgilerini gösterir.
all: Tüm çizgileri gösterir.
groups: Sadece tablonun etrafındaki çizgileri gösterir.
none: Sınır çizgilerini göstermez.

Şimdide isterseniz oluşturduğumuz bir tablo nasıl boyutlandırılır buna bakalım.

Yukarıdaki kodlarla tablomuzu oluşturduk ama tablonun boyutu ile ilgili kararları tarayıcının insafına bıraktık birazda. Böyle durumlarda tarayıcının insafına hiç bir şeyi bırakmamız gerekir. Olaya tam hakim ve müdahil olmalıyız ki tarayıcının yapacağı hatalar yüzünden sayfamızda oluşacak bir biçimsizlik sebebiyle ziyaretçilerimizi kaybetmeyelim. Ziyaretçisi olmayan bir sayfanın bir anlamı  da yoktur. Naçizane bir tavsiye Ziyaretçi benim için önemli değil diyorsan kendi not defterine yazmalısın  :D

Bu kadar nutuktan sonra kendimize gelelim ve asıl işimize dönelim. 

Tablo boyutlandırma.

Tabi ki biz biliyoruz ki genişlik parametremiz Width yükseklik parametremizde Height.

Bunlara pixel olarak yada yüzde olarak girilecek değerler ile satır ve sütunların boyutlarını ayarlayacağız.



İşaretlediğim yerdeki kodları anlatayım. 

  • İlk table etiketi içindeki width parametresine 90% değerini vererek tablo genişliğinin normal sayfanın %90 ını kadar olacağını söyledik.


  •  Sonra td içlerine ise sütunların genişliklerini yazdık. 

  • Sonuncusu için bir değer girmedim zaten kalanı tamamlayacaktır.


Bu arada İngiliz alfabesinde yüzde ifadesi sayının sonunda olduğundan burada da böyledir buna dikkat edelim.

Bu dersimizide burada noktalayalım. Bir sonraki dersimizde Tablolar 2 başlığı altında tablolar konumuzu incelemeye devam edelim. Çalışan dostlarıma kolaylıklar dilerim. Vesselam.

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

Hiç yorum yok:

Yorum Gönder