html dersleri 4(tablo tasarımı )

merhaba arkadaşlar işte sonunda tablo tasarımına geldik.Öncelikle şunu sölim bu işi seviyorsanız devam edin yoksa boşuna uuğraşmanın
anlamı yok çünkü artık iş ciddiye bindi.bunu halleden html yi sökmüş demektir.gözünüz korkmasın işin gerçeği bu.Evet başlayalım...
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Tablo nasıl yaratılır?
<table> ve </table> etiketleri bir tablonun bütün diğer elemanlarını içlerine alırlar. Tablonun içindeki her satır ise <tr> (table row) etiketiyle başlar ve hemen sonra da <td> (table data) etiketiyle o satırın içindeki her bir hücre (data cell) adlandırılır.

Alıntı

<TABLE>
<TR>
<TD>by_infected1</TD>
<TD>by_infected2</TD>
</TR>
<TR>
<TD>forumsn1</TD>
<TD>forumsn2</TD>
</TR>
</TABLE>

örneğimizi web sayfasında açtığımız zaman durum şöyle ii inceleyin...

Alıntı

by_infected1 by_infected2
forumsn1 forumsn2

bana inanmayanlar deneyebilir Sırıtan

şaka şaka öğrenmeniz için yazarak çalışın...
<TABLE>, <TR> ve <TD> etiketlerine birçok özellik yada konut daha ilave edip, tablonun görünümünü ve içeriğin yerleştirilmesini tamamen kontrol altına alabilirsiniz. (Bunun için diğer <TABLE> ipuçlarını okumanız gerekiyor, OK?) Bu komutlar olmadan, tablonun varsayılan değerleri, içeriği çepeçevre sararlar. En basitinden bir sınır atayabilirsiniz. Eğer yukardaki tabloya BORDER (sınır) değeri atarsanız, görünüm aşağıdaki gibi olur.

Alıntı

<TABLE BORDER=1>
<TR>
<TD>by_infected1</TD>
<TD>by_infected2</TD>
</TR>
<TR>
<TD>forumsn1</TD>
<TD>forumsn2</TD>
</TR>
</TABLE>

şimdi nasıl oldu bi bakalım...
Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapörneği görmek için tıklayın...
sanırım işi biraz anladık ok! o zaman biraz daha ilerletelim...
Sınırlar ve hücrelerin ayarlanması
CELLPADDING ve CELLSPACING, <TABLE> etiketinin içine yazılan komutlardan en kullanışlılarıdır. CELLPADDING özelliği, data hücresinin içeriğinin sınırlara olan mesafesini (pixel) olarak ayarlamaya yarar. CELLSPACING ise hücrelerin birbirlerine olan mesafesini ayarlar (varsayılan değer 2 pixeldir.) Aralarında hiç fark yokmuş dediğinizi duyar gibiyim ama yanlış. Aralarında çok fark vardır. Aşağıdaki örnekte, her iki tabloda aynı olup birindeCELLPADDING=10 değeri verilmiştir.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Alıntı

<TABLE BORDER=2 CELLPADDING=10>
<TR>
<TD>by_infected1</TD>
<TD>by_infected2</TD>
</TR>
<TR>
<TD>forumsn1</TD>
<TD>forumsn2</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yap1.örnek için tıklayın
Aşağıdakinde ise CELLSPACING=10 değeri verilmiştir.

Alıntı

<TABLE BORDER=2 CELLSPACING=10>
<TR>
<TD>by_infected1</TD>
<TD>by_infected2</TD>
</TR>
<TR>
<TD>forumsn1</TD>
<TD>forumsn2</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yap2. örnek için tıklayın
Aaa, şimdi anlar gibiyim, ama bunlar ne işe yarayacak ki dediğinizi duyar gibiyim. Gerçekten farkı anladığınıza sevindim, ama ne işe yarayacağını öğrenmeniz için vakit henüz erken; gelin siz bundan sonra tablolarınızı yaparken <TABLE> etiketinin içini aşağıdaki gibi doldurun, gün gelir sizde gerekli kullanımının farkına varıp burada gördüklerinizi değerlendirirsiniz.
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
Bu başlangıç etiketimiz olsun, gelin bundan sonrasını üzerine devam edelim. Tabii, dilerseniz BORDER=0 değerindeki " 0 " ı herhangi bir rakamla değiştirip, gittikçe kalınlaşan bir sınır çizebilirsiniz.

Alıntı

<TABLE BORDER=0 CELLSPACING=1 bgcolor=#000000 width=300 height=150>
<TR>
<TD bgcolor=#ffffff>by_infected1</TD>
<TD bgcolor=#ffffff>by_infected2</TD>
</TR>
<TR>
<TD bgcolor=#ffffff>forumsn1</TD>
<TD bgcolor=#ffffff>forumsn2</TD>
</TR>
</TABLE>

yuhh buda ne hemen daha ne olduki dediniz sanırım ama daha sakin olalım anlatıcam...
table etiketine ne atadık? bg color=#000000 arka plan rengi width=300 height=150 tablonun genişliğini ayarladık...#ffffff beyaz rengi ifade eder örneğe bakalım bi ama kafanız yinede karışırsa verdiğim renk kodlarını değiştirin öle anlarsınız...
Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapbakalım ne yapmışız..tıklayın..
*****colspan and rowspan*****

Alıntı

<TABLE BORDER="2">
<TR>
<TD>by_infected1</TD>
<TD>by_infected2</TD>
<TD>by_infected3</TD>
</TR>
<TR>
<TD>forumsn1</TD>
<TD>forumsn2</TD>
<TD>forumsn3</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapbi tıklayın hele
örneğimize bakalım daha ii anlamanız için.... ama pencereyi kapatmayın biraz bekleyin aşağıdaki verdiğim örneklerle kaşılaştıracaz..
colspan özelliği
İlk hücrenin her 3 sütunu kapsaması için, <TD> etiketinin içine COLSPAN="3" yazalım ve satırdaki diğer iki <TD> etiketlerini silelim

Alıntı

<TABLE BORDER="2">
<TR>
<TD COLSPAN="3">by_infected1</TD>
</TR>
<TR>
<TD>forumsn1</TD>
<TD>forumsn2</TD>
<TD>forumsn3</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yaparadaki fark burada yatıyor....tıkla
rowspan özelliği
Bu arada, ilk hücrenin, diğer iki satırı kapsamasını istiyorsanız, <TD> etiketine ROWSPAN="2" yazalım ve ikinci satırın (row) ilk <TD> etiketini silelim

Alıntı

<TABLE BORDER="2">
<TR>
<TD ROWSPAN="2">by_infected1</TD>
<TD>by_infected2</TD>
<TD>by_infected3</TD>
</TR>
<TR>
<TD>forumsn2</TD>
<TD>forumsn3</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapsonuç için tıklayın....
sanırım davayı biraz çaktınız neyse devam edelim işleri ilerletme zamanı

--------------------------------------------------------------------------------------------------------------------------
Tablo hücreleri, varsayılan olarak kendilerini içeriklerine göre ölçülendirirler (boyutlandırırlar demek istedim.) Fakat, değişik bir boyut istersek ne olacak? O zaman, <TD> etiketinin WIDTH ve HEIGHT özelliklerini girmemiz gerekecek. İstediğiniz ölçüleri pixel olarak yazın! ve bitti. 100 pixel eninde, 80 pixel boyunda istediğiniz bir hücre için aşağıdaki gibi kodu yazdınız mı tamamdır.

Alıntı

<TABLE BORDER="2">
<TR>
<TD WIDTH="100" HEIGHT="80">by_infected</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapne demek istedim bakalım
Tabii bu ölçüler tavsiye edilenler oluyor. Ama bu ölçüler, diğer hücre ölçüleriyle çakışırsa, tarayıcı büyük olan ölçüyü esas alır.
Önemli not:WIDTH ve HEIGHT küçük harflerle yazarken İngilizce de küçük harf ı yerine i yazılır. Bu demektir ki WIDTH ve HEIGHT width ve height olarak yazılabilirse PCniz nedemek istediğinizi anlayacaktır.
Unutmayın, Web sayfanızı tasarlarken, kendinizi PCnizle konuşuyormuş gibi farzedeceksiniz. Siz ne yapması gerektiğini söylerseniz, PC yada tarayıcı programı ona göre hareket edecektir. Sakın ha tarayıcı programları kendi başına bırakmayın, ne istiyorsanız hepsini teker teker söylemelisiniz. Yoksa o sizin namınıza varsayımlara göre hareket etmeye başlar, bu da bazen hiç de hoş olmayan görüntüler verebilir.
Renk meselesi( şark meselesi gibi oldu)
Gelelim işin biraz da eğlenceli atrafına. Artık renksiz tablo arkaplanlarından kurtuluyorsunuz. Renkli tablolar için <TABLE> etiketinin içine BGCOLOR="renkkodu" dediniz mi işlem tamam. "renkkodu" olarak istediğiniz rengin hexadecimal renk kodunu gireceksiniz ( #660099 veya #ESD175 gibi.) Mesela açık sarı renkli bir tablo yapmak için

Alıntı

<TABLE BGCOLOR=#FFFFF0 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>by_infected1</TD>
<TD>by_infected2</TD>
</TR>
<TR>
<TD>forumsn1</TD>
<TD>forumsn2</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yaptıklayın...
Hücre içeriğini yerine yerleştirmek...
Biraz daha güzellik, yada karışıklık; nasıl isterseniz öyle tanımlayın. Ama bu kısım da çok önemli. Çünkü, artık hücrenin içine yerleştirdiğimiz içeriği (resim yada metin), sağa-sola, aşağı-yukarı, (belki günün birinde öne-arkaya) kaydırmasını göreceğiz.

Hepsi <TD> etiketinin içine koyacağımız ALIGN yada align (ayarlamak anlamında) ve VALIGN yada valign (vertical align'ın kısaltması valign yapmışlar) özellikleriyle gerçekleşecek. ALIGN ve VALIGN'ı koyduktan sonra, ki her birinin anlayacağı sıfatlar ayrıdır.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
aligniçin,

* align=center (ortaya)
* align=left (sola)
* align=right (sağa)

valign için

* valign=top (yukarı)
* valign=middle (ortaya)
* valign=bottom (aşağıya)
Dikkatlilerin gözünden kaçmamıştır, align=center (ortaya) ve valign=middle (ortaya) aynı şey değiller mi diye sorabilirsiniz.cevap hem evet hem hayır hemen açıklayım ....

Alıntı

<TABLE WIDTH=200 BORDER=1>
<TR>
<TD>by_infected</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yaptıkla
Şimdi bunu ortaya almak isterseniz valign=middle hiçbir işinize yaramaz. Yalnız align=center bu işi becerir.

Alıntı

<TABLE WIDTH=200 BORDER=1>
<TR>
<TD align=center>by_infected</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapahanda burada
Oldu mu? Peki, valign ne işe yarar, onu da gösterelim:
Eğer hücreniz tek satırdan fazla, yada height özelliği kullanılmışsa, valign özelliği olmadan şöyle bir şey çıkar ortaya...

Alıntı

<TABLE WIDTH=200 HEIGHT=100 BORDER=1>
<TR>
<TD align=center>by_infected</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapböyle bişey çıkar
Browser, varsayılan olarak, vertical (dik) ayarını tam ortaya (middle) yaptı. Yani valign=middle olmuş oldu. Şimdi siz bu ayarı yukarı değiştirmek için valign=top aşağısı için valign=bottom şeklinde etiketin içine ilave yapacaksınız. Ben birini yapıyorum, diğerlerini siz deneyin.

Alıntı

<TABLE WIDTH=200 HEIGHT=100 BORDER=1>
<TR>
<TD align=center valign=top>by_infected</TD>
</TR>
</TABLE>

Linklerin Görülmesine İzin Verilmiyor
Linki Görebilmek İçin Üye Ol veya Giriş Yapişte burada
Ben sizin yerinizde olsam, artık bol bol alıştırma yapıp, web sitemde nevar neyok ise hepsini <TABLE> </TABLE> etiketinin içine almaya uğraşırdım.
Tabloları web sayfasına yerleştirme....
Evet, noktayı koyma zamanı geldi. İki tane <TABLE> özelliği, tablonuzu sayfaya yerleştirmenize olanak sağlar.

ALIGN özelliği ve ALIGN=LEFT, ALIGN=RIGHT, ALIGN=CENTER diyerek tablonuzu sayfaya yerleştirebilirsiniz. ALIGN=LEFT burada varsayılan değerdir.

WIDTH özelliği de, belli bir pixel genişliği belirterek tablonuza atar. <TABLE WIDTH="65"> şeklinde bir rakam ile bu işi görür. Yada tarayıcınızın penceresinin belli bir % oranı atayarak da yapılabilir. <TABLE WIDTH="90%"> örneğindeki gibi. Aşağıdaki örnek, tarayıcı programına, 150 pixel genişliğinde ve sayfanın ortasına yerleştirilmiş bir tablo tarif ediyor.
<TABLE WIDTH="150" ALIGN="CENTER">

Şimdiki örnek ise,
<TABLE WIDTH="75%" ALIGN="RIGHT">

Sayfanın %75ini kaplayacak ama sağa yanaşmış bir tablo tarif ediyor.

Tabii bu dersleri bir başlangıç kabul edebilirsiniz. Bundan sonrası sizin gayretlerinize kalmış. Ne kadar çok deneme yaparsanız, o kadar başarılı olursunuz. Unutmayın, bu işte başarının sırrı tablolarda yatıyor.

evet tablolar bitti.ama şunu sölim işi kaptıysanız tamamdır.veee çok yoruldum..bidahaki derste link vermeyi v.s göstercem tşk yeter yada kafanıza göre takılın selametle.anlamadığınız yeri mutlaka sorun...

	Hala Üye değilmisiniz? Üye olmak çok kolay Hemde Ücretsiz
Üye olmak için tıklayın