Tablolarla Çalışmak [HTML Dersi]

Bu bölümümüzde HTML uzantılı web sayfaları hakkında aradığınıza ulaşabileceksiniz..Java Kodlar, programlar ve daha niceleri..
Cevapla
Kullanıcı avatarı
VSaBaH
Tasarımcı Yönetici
Tasarımcı Yönetici
Mesajlar: 6135
Kayıt: 21 Kas 2005 [ 23:54 ]

Tablolarla Çalışmak [HTML Dersi]

Mesaj gönderen VSaBaH »

Tablolarla Çalışmak

Tablolar Oluşturmak (TABLE)

Sitenizde tablolar kullanmak için TABLE komutunu kullanırız.

Tablomuz içinde satır ve sütunları belirtmemiz gerekmektedir. Bunlar; sütunlar için TD ve satırlar için TR. Aşağıdaki kullanıma bakın. Bunları ayrıca '/' kullanarak kapatırız.

Kod: Tümünü seç

<TABLE> <TR><TD>nesneler</TD></TR> </TABLE> 



TABLE'de Kullanılan Özellikler

BORDER: Bu kenarlık boyutudur. Tablonun kenarlığını belirtmek için kullanılır. Eğer tablonuzda kenarlık olmasını istemiyorsanız 0 yazabilirsiniz. Örnek Kullanım: BORDER=0

CELLSPACING ve CELLPADDING: Cellpadding sütun genişliği, cellspacing satır genişliğidir. Bunlarında bulunmasını istemiyorsanız 0 yazabilirsiniz. Unutmayın bu sayılar büyüdükçe sütun pencerelerine düşen alan azalacaktır.

BGCOLOR: Tablonuzun arkaplan rengidir. Hex kodları olarak (#FFFFFF gibi) ya da ingilizce olarak renkleri yazabilirsiniz. Burada değilde TD(Sütun) içinde kullanımı daha yaygındır. Örnek Kullanım: BGCOLOR=#33CCFF

BACKGROUND: Tablonuzun arkaplan resmidir. Bu gif, jpg.. gibi herhangi bir resim olabilir. Tablonuzun arkaplanında görüntülenecektir.

WIDTH: Tablonun yatay genişliğidir. Bunu piksel olarak belirtebilirsiniz. Kullanılan piksel deyimi 800x600 gibi ekran çözünürlüklerinde kullanılanın aynısıdır. Diğer bir kullanım yolu yüzde olarak belirtmektir. Örneğin WIDTH=40% şeklinde kullanırsak tablo tüm alanın %40'ını kullanacak demektir.

HEIGHT: Tablonun yüksekliğidir. Eğer bu kullanılmazsa yükseklik nesnelerin boyuna göre ayarlanacaktır. Ama kullanılırsa piksel ya da yüzde olarak belirtilebilir.



Aşağıdaki örnekte TABLE'nin özellikleri bir arada kullanılmıştır.

Kod: Tümünü seç

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1
    WIDTH=300 HEIGHT=100 BGCOLOR=#0000C0 BACKGROUND="ARKA.JPG">
<TR><TD>nesneler</TD></TR> </TABLE> 



TR(Satır)'de Kullanılan Özellikler

HEIGHT: Tüm tablo içinde bu satırın yüksekliğini belirleyebilirsiniz. Piksel ya da yüzde olarak. Eğer TABLE'de belirtilen yükseklik TR'lerin toplamından azsa buradakiler geçerli olacaktır. Bu nedenle TABLE'de Height kullanmaya gerek yok. Burada kullanın yeterli..

BGCOLOR ve BACKGROUND: Eğer TD(Sütun)'de bu kod kullanılmadıysa arkaplan veya resim belirlenebilir.

Kod: Tümünü seç

<TABLE>
<TR HEIGHT=100>
<TD>nesneler</TD></TR>
</TABLE>



TD(Sütun)'de Kullanılan Özellikler

:arrow: WIDTH: Sütunun genişliğinin belirtilmesidir. Eğer bir satırda birkaç sütun kullanacaksanız boyutlarını buradan ayarlayabilirsiniz. Piksel ya da yüzde olarak belirtebilirsiniz. Aşağıdaki örneği inceleyebilirsiniz..

Kod: Tümünü seç

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<TR HEIGHT=100>
<TD WIDTH=100>Hücre 1</TD>
<TD WIDTH=150>Hücre 2</TD>
<TD WIDTH=200>Hücre 3</TD>
</TR>
</TABLE> 

:!: TABLO ÖNİZLEME:
Resim



BGCOLOR ve BACKGROUND: Sütun içinde BGCOLOR ile bir renk ya da BACKGROUND ile bir resim kullanabilirsiniz. Arkaplanın nasıl görüneceğini belirtir. TABLE ve TR'de ne kullanılırsa kullanılsın, Her zaman en küçük birim olan TD'de bu özellik geçerlidir.


ALIGN: Hücrenin hizasıdır. Sağa(RIGHT), Sola(LEFT) ya da Ortalanmış(CENTER) olabilir. Örnek Kullanım: ALIGN=CENTER


VALIGN: Hücrenin dikey yöndeki hizasıdır. Yukarıdan(TOP), Aşağıdan(BOTTOM) ya da Ortalanmış(MIDDLE) olabilir. Örnek Kullanım: VALIGN=TOP


CLASS: Formatlanmış bir yazı tipi, renk, kalınlık kullanacaksak CLASS komutunu kullanırız. Yalnız CLASS'den sonra mutlaka STYLE bölümünde tanıtılmış bir isim kullanırız (Style ve CSS konularına sonra bakacağız). Örnek Kullanım: CLASS=METIN


ID: Linklerinden, yazı tiplerine, kalınlıklarına.. Her özelliğini TD'lere özel olarak belirttiğimiz şekilde kullanmamıza yarar.

:arrow: Aşağıdaki örnekte 2 satır(TR) ve 2 sütun(TD) toplam 4 hücreden oluşmuş bir tablonun kodları ve görünümü var.

Kod: Tümünü seç

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100>
<TR HEIGHT=50>
<TD WIDTH=100>Hücre 1</TD>
<TD WIDTH=100>Hücre 2</TD>
</TR>
<TR HEIGHT=50>
<TD WIDTH=100>Hücre 3</TD>
<TD WIDTH=100>Hücre 4</TD>
</TR>
</TABLE>  

:!: TABLO ÖNİZLEMESİ:
Resim



:arrow: Sonraki örnekte COLSPAN kullanarak tablo odalarını birleştirdik.

Kod: Tümünü seç

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100>
<TR HEIGHT=50>
<TD COLSPAN=2 WIDTH=100>Hücre 1</TD>
</TR>
<TR HEIGHT=50>
<TD WIDTH=100>Hücre 3</TD>
<TD WIDTH=100>Hücre 4</TD>
</TR>
</TABLE> 

:!: TABLO ÖNİZLEMESİ:
Resim



:arrow: Ve bir alttaki örnekte ROWSPAN kullanarak dikey yönde odaları birleştirdik.

Kod: Tümünü seç

<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH=200 HEIGHT=100>
<TR HEIGHT=50>
<TD ROWSPAN=2 WIDTH=100>Hücre 1</TD>
<TD WIDTH=100>Hücre 2</TD>
</TR>
<TR HEIGHT=50>
<TD WIDTH=100>Hücre 3</TD>
</TR>
</TABLE>  

:!: TABLO ÖNİZLEMESİ:
Resim

Kaynak: LİNKİ GÖREBİLMEK İÇİN LÜTFEN KAYIT OL VEYA GİRİŞ YAP![/font]


 !
REKLAMLARA YAPILAN TIKLAMA BİZİM TEK GELİR KAPIMIZDIR. LÜTFEN ADBLOCK TARZI EKLENTİLERLE REKLAMLARI ENGELLEMEYELİM. BİZE EN GÜZEL TEŞEKKÜRÜ BU ŞEKİLDE YAPABİLİRSİNİZ. TEŞEKKÜRLER...


Resim

Kullanıcı avatarı
ıIı_aMo_ıIı
Aktif Üye
Aktif Üye
Mesajlar: 23
Kayıt: 22 May 2007 [ 15:32 ]

Mesaj gönderen ıIı_aMo_ıIı »

Çok Saol Abi Güzel Bir Paylasım :D

Cevapla