Tablolarla Çalışmak [HTML Dersi]
Tablolarla Çalışmak [HTML Dersi]
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.
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.
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.
TD(Sütun)'de Kullanılan Özellikler
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..
TABLO ÖNİZLEME:
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.
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.
TABLO ÖNİZLEMESİ:
Sonraki örnekte COLSPAN kullanarak tablo odalarını birleştirdik.
TABLO ÖNİZLEMESİ:
Ve bir alttaki örnekte ROWSPAN kullanarak dikey yönde odaları birleştirdik.
TABLO ÖNİZLEMESİ:
Kaynak: LİNKİ GÖREBİLMEK İÇİN LÜTFEN KAYIT OL VEYA GİRİŞ YAP![/font]
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
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:
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.
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İ:
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İ:
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İ:
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... |
- ıIı_aMo_ıIı
- Aktif Üye
- Mesajlar: 23
- Kayıt: 22 May 2007 [ 15:32 ]