Ana içeriğe atla

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

Yorumlar

Bu blogdaki popüler yayınlar

Matlab Programlama Soru Çözümü

26 Matlab Soru Çözümleri 26
25 Matlab Soru Çözümleri 25
24 Matlab Soru Çözümleri 24
23 Matlab Soru Çözümleri 23

Matlab Programlama Konu Anlatımı

18 Matlab Programlama 18 Matlab de Rand Fonksiyonu KullanımıMerhabalar herkese. Yeni ve belkide programlamada kullanım alanları ve yaptırabildiği uygulamalar dolayısıyla programlamanın önemli konularından olan rastgele sayı üretmeye yardımcı olan rand fonksiyonundan bahsetmeye çalışacağım bu yazımda sizlere.Bismillah diyelim ve başlayalım.Her programlama dilinde olduğu gibi Matlabde de rastgele sayı üretmeye sağlayan bir fonksiyonumuz bir metodumuz mevcuttur.Devamını Gör-->
17 Matlab Programlama 17 Matlab de Kullanıma Hazır Fonksiyonlar Ve İşlevleriMerhabalar herkese. Matlab derslerimizin 13. sü ile yolumuza devam ediyoruz. Bu dersimizde sizlere Matlab'in pek çok hazır fonksiyonundan ve işlevlerinden bahsetmeye çalışacağım.O zaman Bismillah diyelim ve yolumuza koyulalım.1 SAYI YUVARLAMA FONKSİYONLARIMatlab de ondalık sayılar üzerinde işlem yapabilmek için bize kolaylık sağlayan 4 tane fonksiyon vardır. Bu fonksiyonlar fix, round, ceil ve floor'dur.Devamını Gör-->
16 Matla…

Matlab Programlama 18 Matlab de Rand Fonksiyonu Kullanımı

Merhabalar herkese. Yeni ve belkide programlamada kullanım alanları ve yaptırabildiği uygulamalar dolayısıyla programlamanın önemli konularından olan rastgele sayı üretmeye yardımcı olan  rand fonksiyonundan bahsetmeye çalışacağım bu yazımda sizlere.
Bismillah diyelim ve başlayalım.
Her programlama dilinde olduğu gibi Matlabde de rastgele sayı üretmeye sağlayan bir fonksiyonumuz bir metodumuz mevcuttur.
Temel kullanımı rand(n,m) şeklindedir. Bu ifade şunu yapar n satırlı ve m sütunlu bir matrisi 0 ile 1 arasında rastgele gelen ondalık sayılar ile doldurur.