Html Dersleri / Table Tagı Nasıl Kullanılır?

2. Sınıf Öğrencileri İçin Sunular 1
5. Sınıf Öğrencileri Için Sunular 13
8. Sınıf Öğrencileri İçin Sunular 23
Belirli Gün Ve Haftalar 1
Bilgisayar Donanımları 5
Bilgisayar Programlama 2
Bilgisayar Yazılım 2
Bilişim Teknolojileri Ve Yazılım Temel Bilgisayar 64
Biyografiler 2
Biyoloji 2
Değerler Eğitimi 4
Eba Elektronik Bilişim Ağı 5
Eğitim-Öğretim Sunuları 3
Felsefe 2
İslam 3
Kelime İşlemci 1
Kişisel Gelişim 4
Kodlama, Robotic 4
Ortak Eğitim Proje Sunuları. 2
Problem Çözme Ve Algoritmalar 3
Proje Nedir? Nasıl Yapılır? 1
Rehberlik 16
Sağlık 3
Savaşlar 1
Scratch 1
Seminerler 3
Sınav Kaygısı 2
Sosyal Bilgiler 1
Sosyal Bilgiler 1
Tarih 1
Ulaşım Araçları 1
Verimli Ders Çalışma 1
Web Araçları 0
Windows İşletim Sistemi 1
Yarışmalar 0

Table Tagı Nasıl Kullanılır?

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodlar aşağıdadır.

<table> </table>
Sitelerimizde tablolar kullanmak için TABLE komutunu kullanırız.

Tablo 1.2. Table etiketi yard?mc? kodlar?

Girilecek Kod	Görevi
border = "de?er"	Tablonun kenarl???n?n varl???n? belirler.
width = "de?er"	Tablonun geni?li?i belirlenir.
height = "de?er"	Tablonun yüksekli?i belirlenir.
bgcolor = "renk"	Tablonun zemin rengi belirlenir.
cellpadding = "de?er"	Tablo gözeleri içindeki ö?elerin tablo kenarl?klar?na uzakl??? belirlenir.
cellspacing = "de?er"

Bu kodlar? verdikten sonra basit bir tablo örne?i vermek istiyorum. Verdi?im örnekte table etiketi d???nda ba?ka etiketlerde kulland???ma dikkat edin.

<table border="1" bgcolor="#aabbcc">
  <tr>

    <td bgcolor="#f80000">Burada bir yaz? var</td>
    <td>Buras? da ba?ka bir göze.</td>
  </tr>
</table>

Burada bir yaz? var

Buras? da ba?ka bir göze.

Yazd???m kodlar? dikkatli bir ?ekilde incelemi?seniz, <tr> ile sat?r ba?lang?c? ve <td> ile sütun ba?lang?c? yapt???m?z? fark etmi?sinizdir. Yani her <tr> etiketi bize bir sat?r açar ve biz <td> etiketi ile bu sat?ra sütunlar yerle?tiririz. Daha sonra </tr> etiketi ile sat?r bitirilir. Yukar?daki tabloya bir sat?r daha eklemek için a?a??daki gibi bir kod kümesi kullan?r?z.

<table border="1" bgcolor="#aabbcc">
  <tr>
    <td bgcolor="#f80000">Burada bir yaz? var</td>
    <td>Buras? da ba?ka bir göze.</td>
  </tr>

<!-- A?a??da ikinci sat?r ba?l?yor -->
  <tr>
    <td bgcolor="#00f800" width="50%">?kinci sat?r?n ilk sütunu</td>
    <td>?kinci sat?r?n ikinci sütunu</td>
  </tr>

</table>

Burada bir yaz? var	Buras? da ba?ka bir göze.
?kinci sat?r?n ilk sütunu	?kinci sat?r?n ikinci sütunu

Yukar?daki kod kümesi bize iki sat?rl? bir tablo verecektir. <td> etiketi ile birlikte width, bgcolor gibi özelliklerin kullan?labildi?ine dikkat edin.

Peki ya iki sütunluk bir sat?r ya da iki sat?rl?k bir sütun yapacaksak nas?l yapaca??z? A?a??daki kodlar? incelerseniz sorunuza cevap bulabilirsiniz.

<table border="1" bgcolor="aabbcc" width="80%">
  <tr>
    <td bgcolor="#f80000">Burada bir yaz? var</td>
    <td>Buras? da ba?ka bir göze.</td>

  </tr>
<!-- A?a??da ikinci sat?r ba?l?yor -->
  <tr>
    <td bgcolor="#00f800" width="50%">?kinci sat?r?n ilk sütunu</td>
    <td>?kinci sat?r?n ikinci sütunu</td>

  </tr >
<!--
    Bu yeni sat?r iki sütunluk. Bunu <td> etiketini içinde
    colspan="sütun say?s?" ile belirledim
    Ayn? ?eklide iki sat?rl?k bir sütun olu?turmak için
    rowspan="sat?r say?s?" kodu kullan?l?r
-->
  <tr>
    <td colspan="2">
      <center>

        Tablomuz iki sütunluk olmas?na ra?men, burada iki sütunluk bir sat?r var.
      </center>
    </td>
  </tr>
  <tr>
    <td rowspan="2">Buras? iki sat?rl?k bir sütun.</td>

    <td>Buras? ilk sat?r.</td>
  </tr>
  <tr>
    <td>Buras? da ikinci sat?r.</td>
  </tr>

</table>

Burada bir yaz? var	Buras? da ba?ka bir göze.
?kinci sat?r?n ilk sütunu	?kinci sat?r?n ikinci sütunu
Tablomuz iki sütunluk olmas?na ra?men, burada iki sütunluk bir sat?r var.
Buras? iki sat?rl?k bir sütun.	Buras? ilk sat?r.
Buras? iki sat?rl?k bir sütun.	Buras? da ikinci sat?r.

Yukar?daki örneklerde tabloda kenarl?klar?n görünüp ö?retici olmas? için border=”1” kodunu kulland?m. Sayfalar?n?zda gerekmedikçe kenarl?k kullanmaman?z sayfan?z?n görünümü aç?s?ndan iyi olacakt?r.

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> <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.

<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.

<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 inceleyin.

<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>

Hücre 1
100 px GenişliğindeHücre 2
150 px GenişliğindeHücre 3
200 px Genişliğinde

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. (Sonraki konularda işleyecez)

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.

<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>

Hücre 1Hücre 2Hücre 3Hücre 4

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

<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>

Hücre 1Hücre 2Hücre 3

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

<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>

Hücre 1Hücre 2Hücre 3

<table border="1">
             <tr>
                   <td bgcolor="#0bc5e1"><font color="#ffffff">Dersler</font></td>
                   <td bgcolor="#66e10b"><font color="#ffffff">1. S?nav</font></td>
                   <td bgcolor="#66e10b"><font color="#ffffff">2. S?nav</font></td>
                   <td bgcolor="#66e10b"><font color="#ffffff">Ortalama</font></td>
             </tr>
             <tr>
                   <td bgcolor="#0bc5e1"><font color="#ffffff">Matematik</font></td>
   <td>30</td>
                   <td>40</td>
                    <td>35</td>
            </tr>
             <tr>
                    <td bgcolor="#0bc5e1"><font color="#ffffff">Fen</font></td>
<td>70</td>
                    <td>60</td>
                    <td>65</td>
           </tr>
            <tr>
                    <td bgcolor="#0bc5e1"><font color="#ffffff">Türkçe</font></td>
                    <td>100</td>
                    <td>50</td>
                    <td>75</td>
           </tr>
</table>

Dersler	1. S?nav	2. Sınav	Ortalama
Matematik	30	40	35
Fen	70	60	65
Türkçe	100	50	75

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.

Hücre 1Hücre 2Hücre 3Hücre 4

Sonraki örnekte COLSPAN kullanarak tablo odalar?n? birle?tirdik.

Hücre 1Hücre 2Hücre 3

Ve bir alttaki örnekte ROWSPAN kullanarak dikey yönde odalar? birle?tirdik.

Hücre 1	Hücre 2
	Hücre 3

Grafik destekli Web programlarinin tablo destegi ile çok çesitli istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu gösterilebilir. Tablo hazirlama basligi altindaki örnekler, her çesit tablonun olusturulmasi için yeterli degildir. Kullanici, istegi dogrultusunda bunlari gerçeklestirmelidir.

Ekranda tablo gösterirken, o an kullanilan pencerenin büyüklügüne ve tablo içindeki metinin genisligine göre tablonun en ve boyu degisebilir.

Tablo, satir ve sütunlardan olustugu için her hücre ayri ayri tanimlanir. Her satir ve sütun, kendi içinde baska satir ve sütunlari ihtiva edebilir.

Tablolara baslik, liste, paragraf, form, figür ve her formatta metin konabilir.

Örnegin,

   <TABLE BORDER>

   <TR><TH ROWSPAN=2><TH COLSPAN=2>Average

   <TH ROWSPAN=2>other<BR>category<TH>Misc

   <TR><TH>height<TH>weight

   <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003

   <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002

   </TABLE>

Yukaridaki örnek, asagidaki gibi görünür:

	Average		other category	Misc
	height	weight	other category
males	1.9	0.003
females	1.7	0.002
females

Dikkat edilmesi gereken noktalar:

Default olarak, header hücreler merkeze alinir, digerleri saga yanasik olarak ekrana gelirler. Bunu engellemek için hücre için <ALIGN=.. belirteci, tüm tablo için <COLSPEC=.. belirteci kullanilir.
Her hücre bos olabilir.
Tablodaki her satirdaki kolon sayisinin esit olmadigi durumlarda kayip hücreler tablonun sagina yerlestirilir ve içleri bos kalir.
Tablodaki satir sayisi <tr belirteci tarafindan belirlenir.
<th> ve <tc> belirteçleri sadece <tr> belirteçleri arasinda olabilir.
Hücrelerin üstüste gelmesi istenmeyen sonuçlar yaratabilir.

Tablo ebadi

Tüm tablonun uzunlugu, en genis satirla belirlenir. Kelimeler kisaltilmadigi için paragraflar <br> ile kesilmedikçe ekrana gelirler. En kisa uzunluk da en genis kelime veya resmin uzunlugu ile bagintilidir.

Align

Tablonun dik halinin nasil olacagini belirler.

Left

Metini ekranin soluna yanasik yazar.

Right

Metini ekranin sagina yanasik yazar.

Colspec

Sütunlarin ebadini ayarlar. Sütunlar soldan saga, bir büyük harf ve onu izleyen bir sayi ile listelenirler (örnegin <COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttigi yazilari L harfi sola, R harfi saga alir. C harfi ortalamak için kullanilir. Burada belirteç opsiyonlari mutlaka büyük harfle yazilir.

Border

Bu belirteç, tablo kenarlarinin ebadini kontrol etmeye yarar.
<table border=10>

Nowrap

Programin tablo içinde paragraflari otomatik olarak kesmemesi için kullanilir.Böylece kullanici istedigi yerde <br> belirtecini kullanabilir.

Tablo Örnekleri

Temel bir 3X2 tablo

A	B	C
D	E	F

<table border>

               <tr>

                               <td>A</td> <td>B</td> <td>C</td>

               </tr>

               <tr>

                               <td>D</td> <td>E</td> <td>F</td>

               </tr>

</table>

"Rowspan" kullanilmasi

1. hücre	2. hücre	3. hücre
4. hücre	2. hücre	5. hücre

<table border>

               <tr>

                               <td>1. hücre</td>

                               <td rowspan=2>2. hücre</td>

                               <td>3. hücre</td>

               </tr>

               <tr>

                               <td>4. hücre</td> <td>5. hücre</td>

               </tr>

</table>

1. hücre	2. hücre	3. hücre	4. hücre
1. hücre	5. hücre	6. hücre	7. hücre

<table border>

               <tr>

                               <td rowspan=2>1. hücre</td>

                              <td>2. hücre</td> <td>3. hücre</td>

<td>4. hücre</td>

               </tr>

               <tr>

                               <td>5. hücre</td> <td>6. hücre</td> <td>7. hücre

               </td>

               </tr>

</table>

"Colspan" kullanilmasi

1. hücre	2. hücre
3. hücre	4. hücre	5. hücre

<table border>

               <tr>

                               <td>1. hücre</td>

                               <td colspan=2>2. hücre</td>

               </tr>

               <tr>

                               <td>3. hücre</td> <td>Item 4</td> <td>5. hücre</td>

               </tr>

</table>

"Colspan" ve Basliklarin birlikte kullanilmasi

Head1		Head2
A	B	C	D
E	F	G	H

<table border>

               <tr>

                               <th colspan=2>Head1</th>

                              <th colspan=2>Head2</th>

               </tr>

               <tr>

                               <td>A</td> <td>B</td> <td>C</td> <td>D</td>

               </tr>

               <tr>

                               <td>E</td> <td>F</td> <td>G</td> <td>H</td>

               </tr>

</table>

Yan Basliklarin kullanimi

Baslik1	1. hücre	2. hücre	3. hücre
Baslik2	4. hücre	5. hücre	6. hücre
Baslik3	7. hücre	8. hücre	9. hücre

<table border>

               <tr><th>Baslik1</th>

                               <td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td></tr>

               <tr><th>Baslik2</th>

                               <td>4. hücre</td> <td>5. hücre</td> <td>6.hücre</td></tr>

               <tr><th>Baslik3</th>

                               <td>7. hücre</td> <td>8. hücre</td> <td>9. hücre</td></tr> </table>

"Rowspan" ve yan basliklarin birlikte kullanilmasi

Baslik1	1. hücre	2. hücre	3. hücre	4. hücre
Baslik1	5. hücre	6. hücre	7. hücre	8. hücre
Baslik2	9. hücre	10. hücre	11. hücre	12. hücre

<table border>

               <tr><th rowspan=2>Baslik1</th>

                   <td>1. hücre</td> <td>2. hücre</td><td>3. hücre</td> <td>4. hücre</td>

               </tr>

               <tr><td>5. hücre</td> <td>6. hücre</td><td>7. hücre</td> <td>8. hücre</td>

               </tr>

               <tr><th>Baslik2</th>

                   <td>9. hücre</td> <td>10. hücre</td> <td>11. hücre</td> <td>12. hücre</td>

               </tr>

</table>

10 birim kenari olan tablo

1. hücre	2. hücre
3. hücre	4. hücre

<table border=10>

               <tr>        <td>1. hücre</td> <td>2. hücre</td>

               </tr>

               <tr>        <td>3. hücre</td> <td>4. hücre</td>

               </tr>

</table>

Cellpadding ve Cellspacing belirteçlerinin kullanilmasi

A	B	C
D	E	F

<table border cellpadding=10 cellspacing=0>

               <tr>

                               <td>A</td> <td>B</td> <td>C</td>

               </tr>

               <tr>

                               <td>D</td> <td>E</td> <td>F</td>

               </tr>

</table>

A	B	C
D	E	F

<table border cellpadding=0 cellspacing=10>

               <tr>

                               <td>A</td> <td>B</td> <td>C</td>

               </tr>

               <tr>

                               <td>D</td> <td>E</td> <td>F</td>

               </tr>

</table>

A	B	C
D	E	F

<table border cellpadding=10 cellspacing=10>

               <tr>

                               <td>A</td> <td>B</td> <td>C</td>

               </tr>

               <tr>

                               <td>D</td> <td>E</td> <td>F</td>

               </tr>

</table>

Tablo içinde birden fazla satir kullanimi

Ocak	Subat	Mart
Bu 1. Hücre	2. Hücre	Diger hücre, 3. hücre
4. Hücre	ve iste bu 5. hücre	6. hücre

<table border>

               <tr>

                               <th>Ocak</th>

                               <th>Subat</th>

                               <th>Mart</th>

               </tr>

               <tr>

                               <td>Bu 1. hücre</td>

                              <td>2. hücre</td>

                              <td>Diger hücre,<br>3. hücre</td>

               </tr>

               <tr>

                               <td>Cell 4</td>

                              <td>ve iste bu<br>5. hücre</td>

                              <td>6. hücre</td>

               </tr>

</table>

Hücrenin sagina, soluna ve ortasina metin yazmak

Ocak	Subat	Mart
Hepsi ortada	2. hücre	Diger hücre, 3. hücre
saga yanasik	merkezde	default, sola yanasik

<table border>

               <tr>

                   <th>Ocak</th>

                   <th>Subat</th>

                   <th>Mart</th>

               </tr>

               <tr align=center>

                   <td>Hepsi ortada</td>

                   <td>2. Hücre</td>

                   <td>Diger hücre,<br>3. hücre</td>

               </tr>

               <tr>

                   <td align=right>saga yanasik</td>

                   <td align=center>merkezde</td>

                   <td>default,<br>sola yanasik</td>

               </tr>

</table>

Metinleri listelerin yan?s?ra tablolar yard?m?yla da düzenleyebiliriz. Sörf yaparken rastlad???n?z sayfalar ço?unlukla iç içe geçmi? tablolardan olu?ur. Bu nedenle iyi bir sayfa tasarlamak için tablolara hakim olmak gereklidir.

Tablolar <table>...</table> etiketleri aras?na yaz?l?r.<tr> etiketi bir yatay s?ra olu?turulur, bu yatay s?ra istenilen say?da <td> etiketiyle hücrelere bölünür.A?a??daki örne?e bakarak tablo mant???n? anlayabilirsiniz.

< table> Hücre1	Hücre2	Hücre3
Hücre4	Hücre5	Hücre6

<TD< td>

<tr>

<td >Hücre1</td>
<td >Hücre2</td>
<td >Hücre3</td>

</tr>
<tr>
<td>Hücre4</td>
<td>Hücre5</td>
<td>Hücre6</td>
</tr>

</table>

10/1. <TABLE> ET?KET? VE PARAMETRELER?

Burada width ve height parametrelerini aynen daha önce kulland???n?z gibi kullanabilirsiniz...

bgcolor

Hücrenin içinin rengini belirler.

<table>
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

background

Hücre içine resim koyar.

<table background="deneme.gif">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

border

Hücre etraf?na yerle?tirece?iniz çerçevenin kal?nl???n? belirler

<table border="5">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

bordercolor

Çerçeve rengini belirler

<table border="5" bordercolor="teal">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

bordercolorlight

Çerçevenin sol ve üst kenarlar?n?n rengini belirler

<table border="5" bordercolorlight="aqua">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

bordercolordark

Çerçevenin sa? ve alt kenarlar?n?n rengini belirler.

<table border="5" bordercolordark="blue">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

align

Hücrenin yatay konumu belirler

<table align="right">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

cellspacing

Hücre etraf?ndaki çerçevenin kal?nl???n? belirler.

<table border="1" cellspacing="10">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

cellpadding

Hücre içindeki elemanlar?n (metin, resim, vs.) çerçeveden uzakl???n? belirler.

<table border="1" cellpadding="10">
<tr>
<td>Hücre</td>
</tr>
</table>

Hücre

10/2. <TR> ve <TD> ET?KETLER?

<TR> etiketi, üzerine <td> etiketiyle hücreler dö?enmesi için yatay bir s?ra,bir platform olu?turur.Dolay?s?yla bu etiketin parametreleri herhangi bir i?imize yaramaz. Tablo içindeki bütün düzenlemeleri a?a??da parametreleri verilen <td> etiketiyle yapabiliriz.

bgcolor

<table>
<tr>
<td bgcolor="teal">
Hücre</td>
</tr>
</table>

Hücre

background

<table>
<tr>
<td background="deneme.gif">
Hücre</td>
</tr>
</table>

Hücre

align

<table border="1" width="100" height= "100">
<tr>
<td align="right">
Hücre</td>
</tr>
</table>

Hücre

valign

<table border="1" width="100" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>

Hücre

bordercolor

<table border="1">
<tr>
<td bordercolor="blue">
Hücre</td>
</tr>
</table>

Hücre

colspan

1	2	3
4		5
6	7	8

rowspan

<table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table>

1	2	3
4	5	6
7	5	8

Yukar?daki parametrelerden colspan yatay eksen üzerindeki iki hücreyi birle?tirmek için kullan?l?r. Bu parametreye de?er olarak birle?ecek hücre say?s? verilir. Rowspan ise bu i?i dikey eksen üzerindeki iki hücre için yapar. di?er parametrelerin kullan?mlar?n? zaten ba?ka etiketler üzerinde gördük.

10/3. TABLO UYGULAMALARI

Bu uygulamalar? önce kendiniz yapmaya çal???n, e?er tak?l?rsan?z kodlar?ndan faydalan?n.

Uygulama

Küçük bir tablo uygulamas?

<table>
<tr>
<td width="300" bgcolor="teal" align="center">Uygulama</td>
</tr>
<tr>
<td height="200" bgcolor="silver" align="center">Küçük bir tablo uygulamas?</td>
</tr>
</table>

Hosting
1.seçenek	20 Mb	100$/y?l
2.seçenek	50 Mb	150$/y?l

<table cellpadding="10" border=1>
<tr>
<td colspan="3" align="middle" bgcolor="red" >Hosting</td>

</tr>
<tr>
<td bgcolor="teal">1.seçenek</td>
<td align="middle">20 Mb</td>
<td align="middle">100$/y?l </td>
</tr>
<tr>
<td bgcolor="teal">2.seçenek</td>
<td align="middle">50 Mb</td>
<td align="middle"> 150$/y?l</td>
</tr>
</table>

SÜRÜCÜ C?NS?	HIZ				Cd-Dvd rom'lar
CD-ROM	30X	40X	50X	60X
DVD	10X		12X

<table BORDER="1" bgcolor="silver" bordercolor="black">
<tr>
<td bgcolor="red">SÜRÜCÜ C?NS?</td>
<td bgcolor="red" colspan="4" align="center">HIZ</td>
<td bgcolor="teal" color="white" rowspan="3"> Cd-Dvd rom'lar</td>
</tr>
<tr>
<td>CD-ROM</td>
<td>30X</td>
<td>40X</td>
<td>50X</td>
<td>60X</td>
</tr>
<tr>
<td>DVD</td>

<td colspan="2">10X</td>
<td colspan="2">12X</td>

</tr>
</table>

<table border="1" cellpadding="0" cellspacing="0">
          <tr>
                <td>Logo</td>
                <td colspan="2">Baslik</td>
                 <td>Tarih</td>
          </tr>
          <tr>
                 <td height="100" rowspan="2">Sol Menü</td>
                 <td colspan="2">?çerik1</td>
                 <td rowspan="2">Sa? Menu</td>
          </tr>
           <tr>
                <td>?çerik2</td>
                <td>?çerik3</td>
           </tr>
           <tr>
                 <td colspan="4" align="center">Sayfa Alt?</td>
          </tr>
</table>

Logo	Baslik		Tarih
Sol Menü	?çerik1		Sa? Menu
	?çerik2	?çerik3
Sayfa Alt?

<table border="1" cellpadding="0" cellspacing="0">
            <tr>
                  <td>Logo</td>
                  <td>Baslik</td>
                  <td>Tarih</td>
            </tr>
             <tr>
                   <td height="100">Sol</td>
                   <td valign="top">
                                 <table border="1" cellpadding="0" cellspacing="0">
                                           <tr>
                                                   <td colspan="2">?çerik1</td>
                                           </tr>
                                            <tr>
                                                   <td>?çerik2</td>
                                                    <td>?çerik3</td>
                                            </tr>
                                  </table>
                    </td>
                     <td>Sa?</td>
               </tr>
                <tr>
                       <td colspan="3" align="center">Sayfa Alt?</td>
               </tr>
</table>

Logo

Baslik

Tarih

Sol

?çerik1
?çerik2	?çerik3

Sa?

Sayfa Alt?

Kaynak www.belgeler.org, www.venus.gen.tr/programlama/html/tablolarla-calismak.html, www.kesdi.com/htmlders.php
, www.htmldersleri.org/htmlders10.htm

28,292 Okunma Henüz yorum yapılmamış 05/07/2007 14:46:47 10/03/2015 10:45:13

Yorumunuzu Ekleyin

Table Tagı Nasıl Kullanılır? Yorumları +1 Yorum

1

Gökçe Gün

Selamlar,

Güzel HTML anlatımlarınız için teşekkürler.

Ben de HTML video anlatımlarını koyduğum bir site açtım. Sizden de feedback beklerim. İzninizle paylaşıyorum. www.yakinkampus.com

HTML Dersleri: a hrefhttp://yakinkampus.com/dersler/xhtml-ve-css-dersleri/HTML Dersleri/a

01 Aralık 2012 15:51:19, Cumartesi

IMG Tagı Nasıl Kullanılır?

Eger Web sayfalarini gezerken grafik destekleyen bir tarayıcı kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir.Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir

55,666 okuma, 07/03/2015

Html Tag Listesi

Bazı html tagları hakkında açıklamalı referans listesi

55,374 okuma, 29/05/2014

Web Site Tasarımında DIV Kullanımı

Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları ekranları için) kolay olmasıdır.

50,497 okuma, 08/03/2015

Meta Tag Nedir?

Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır. Onun gibi düşünmelisiniz

48,427 okuma, 22/12/2015

HTML ile İlk Sayfayı Oluşturmak

İlk HTML sayfamızı nasıl oluşturuyoruz?

48,252 okuma, 06/03/2015

HTML5 Form Yapısı ve Form Elemanları

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik.Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar.Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz.Formlar .etiketleri arasına yazılırlar.Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım

48,112 okuma, 31/12/2015

UL OL DL Tagları

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

46,262 okuma, 02/07/2019

FRAME Tagı

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeri?ini yerleştirmektir

42,206 okuma, 19/09/2014

XHTML Nedir?

XHTML kısaltmasının açılımı İngilizce'de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise "Geliştirilebilir Büyütülmüş Metin İşaretleme Dili"dir

36,183 okuma, 27/03/2019

BODY Tagı Nasıl Kullanılır?

Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir.

35,563 okuma, 12/05/2014

A Tagı Nasıl Kullanılır?

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır.

35,534 okuma, 12/05/2014

HEAD Tagı Nasıl Kullanılır?

Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketlerinin bulunduğu bölümdür.

31,973 okuma, 20/12/2015

Html Nedir? Ve Html Tag'leri

Gelişen browser teknolojileri sayesinde, html içine yazılar dışında resim, ses, video, java, javascript, vbscript gibi dillerle yazılmış programlar, ya da diğer nesneler de gömülebilir. Bu sayede bir html dökümanı düzenlenmiş, mizampajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin, browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa, html'le online bir gazete, bir slide-show, şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz.

31,074 okuma, 06/03/2015

DOCTYPE Tagı

Genel bir bilgi vermek gerekirse; web sayfalarınızın tarayıcı tarafından nasıl yorumlanacağını başka bir değişle nasıl görüntüleneceğini ve bu görüntüleme işlemi sırasında hangi standart ve tanımlamaları (DTD: Document Type Definitions / Doküman türü tanımlamaları) kullanacağını belirten ve (X)HTML dokümanlarının en üst kısmında yer alan ifadelerdir.

28,618 okuma, 17/10/2012

P, PRE, B, EM, STRONG, I, SUP, SUB, DEL, CODE Taglar?

28,010 okuma,

Genel HTML Tagları

Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r.HTML içinde kullan?lan tüm etiketler ??ile biter.Ayr?ca etiketin yorum aral??? da ?? kal?b? ile bitirilir.A?a??da etiket kullan?m?na k?sa bir örnek

25,713 okuma, 06/03/2015

IFRAME Tagı

Bir web sayfasının içersine daha çok başka bir sitenin içeriğini aktarmak için kullandığımız bir yol

25,080 okuma,

DOCTYPE Tagı Nasıl Kullanılır?

HTML sayfasının nasıl bir HTML versiyonu ile yazıldığını web tarayıcısına bildirmek DOCTYPE tagının görevidir.

25,056 okuma, 12/05/2014

HTML nedir?

Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir.

24,458 okuma, 29/05/2014

FORM Tagı

Form tagı parametreleri

24,295 okuma, 16/05/2015

Meta Tag nedir?

Meta tag’lar HTML kodunuzun HEAD bölümüne yerleştirilmiş bilgi etiketleridir. Arama motorlarına site ve içeriği hakkında bilgi sunar. Her ne kadar günümüzdeki arama motorlarının çoğu meta tag’lardaki bilgileri dikkate almayıp site içeriğini kendi tekniklerine göre indeksleseler de hala bu tag’lardan bazılarına kısmi destek verebiliyorlar. Arama motorlarının özellikleri için buraya bakabilirsiniz. Sitenizin bu arama motorlarınca doğru bir şekilde gösterimi için bazı Meta tag’ları kullanmakta fayda var. Burada sıklıkla kullanılan meta tag’ları açıklamaya ve onları site kodu içerisine nasıl yerleştirebileceğinizi açıklamaya çalışacağım

23,555 okuma,

HTML Editörleri

HTML kodu yazarken hata yapmamak ve kodları daha düzgün görmek için HTML editörleri kullanırız. Aynı zamanda bu editörler kodları yazarken kodun alabileceği değerler hakkındada ön bilgi verir.

23,469 okuma, 08/10/2012

xml xhtml html hakkında

Xml Html arasındaki fark

22,873 okuma, 15/05/2014

HR Tag

etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.

22,515 okuma, 03/12/2012

Arama Motorlarına Kayıt

21,872 okuma, 11/03/2014

HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Taglar...

HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür.

21,037 okuma, 27/12/2015

HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Taglar...

DIV Tagı Nedir?

Web sitelerinin iskeletleri DIV tagı kullanarak oluşturulur. Ayrıca web sitesindeki nesnelerin yerleri DIV tagı ile belirlenir.

20,821 okuma, 08/03/2015

BR Tag

Bir alt satıra geçmek için kullanılır.

20,215 okuma, 03/12/2012

P Tag

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.

19,775 okuma, 05/12/2012

U Tag

İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.

19,088 okuma, 03/12/2012

Table Tagı Nasıl Kullanılır?

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodlar aşağıdadır.

Tablo ebadi

Tablo Örnekleri

Temel bir 3X2 tablo

"Rowspan" kullanilmasi

"Colspan" kullanilmasi

"Colspan" ve Basliklarin birlikte kullanilmasi

Yan Basliklarin kullanimi

"Rowspan" ve yan basliklarin birlikte kullanilmasi

10 birim kenari olan tablo

Cellpadding ve Cellspacing belirteçlerinin kullanilmasi

Tablo içinde birden fazla satir kullanimi

Hücrenin sagina, soluna ve ortasina metin yazmak

Gökçe Gün

IMG Tagı Nasıl Kullanılır?

Html Tag Listesi

Web Site Tasarımında DIV Kullanımı

Meta Tag Nedir?

HTML ile İlk Sayfayı Oluşturmak

HTML5 Form Yapısı ve Form Elemanları

UL OL DL Tagları

FRAME Tagı

XHTML Nedir?

BODY Tagı Nasıl Kullanılır?

A Tagı Nasıl Kullanılır?

HEAD Tagı Nasıl Kullanılır?

Html Nedir? Ve Html Tag'leri

DOCTYPE Tagı

P, PRE, B, EM, STRONG, I, SUP, SUB, DEL, CODE Taglar?

Genel HTML Tagları

IFRAME Tagı

DOCTYPE Tagı Nasıl Kullanılır?

HTML nedir?

FORM Tagı

Meta Tag nedir?

HTML Editörleri

xml xhtml html hakkında

HR Tag

Arama Motorlarına Kayıt

HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Taglar...

DIV Tagı Nedir?

BR Tag

P Tag

U Tag