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

 
www.dijitalders.com <table border="10" width="200" cellpadding="10" cellspacing="50" bordercolor="#ffff00">
          <tr>
                 <td bgcolor="#00ff00">Bir</td> <td align="right">?ki</td>
          </tr>
           <tr>
                 <td>Uc</td><td align="right">Dort</td>
           </tr>
           <tr>
                 <td>Bes</td> <td align="right">Alt?</td>
          </tr>
           <tr>
                  <td colspan="2">Yedi</td>
           </tr>
</table>

 

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

 


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

 

males

1.9

0.003

 

 

females

1.7

0.002

 

 

 

 

 

 

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

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

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

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>

     

 <table border="1">

<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

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

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

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

 

Yorumunuzu Ekleyin
Table Tagı Nasıl Kullanılır? Yorumları +1 Yorum
  • Gökçe Gün
    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


Yükleniyor...
Yükleniyor...