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 kenarları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 etiketidışı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ğıdakii 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ğıdakii kullanıma bakın. Bunları ayrıca '/' kullanarak kapatrı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
< Dersin Sonlanması >

 
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ğıdakii ö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 hücretlerini 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 hücreleri 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 Ebadı

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" Kullanılması

 

1. hücre

2. hücre

3. hücre

4. hücre

5. hücre

 

<table>
               <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" Kullanılması

1. hücre

2. hücre

3. hücre

4. hücre

5. hücre

 

<table>
               <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 Başlıkların Birlikte Kullanılması

 

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 Başlıkların Kullanımı

 

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 Başlıkların Birlikte Kullanılması

 

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 Kenarı 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 Kullanılması

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 İçinde Birden Fazla Satır Kullanımı

 

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 Sağına, Soluna ve Ortasına 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ğıdakii örneğe bakarak tablo mantığını anlayabilirsiniz.

< table> Hücre1

Hücre2

Hücre3

Hücre4

Hücre5

Hücre6

 

     

  

<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

 

 

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

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

 

 

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

31,089 Okunma 1 Yorum 09/10/2025 15:18:36 09/10/2025 15:27:50

/ 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
Görsel Liste
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

62,931 okuma, 04/10/2024

Meta Tag Nedir?
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

59,224 okuma, 04/10/2024

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

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

58,482 okuma, 11/10/2024

Html Tag Listesi
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.

54,687 okuma, 16/10/2025

Web Site Tasarımında DIV Kullanımı
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

51,568 okuma, 12/11/2024

HTML5 Form Yapısı ve Form Elemanları
HTML ile İlk Sayfayı Oluşturmak

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

50,631 okuma, 06/03/2015

HTML ile İlk Sayfayı Oluşturmak
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.

49,952 okuma, 02/07/2019

UL OL DL Tagları
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

45,192 okuma, 19/09/2014

FRAME Tagı
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

38,631 okuma, 27/03/2019

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

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

38,306 okuma, 11/10/2024

A Tagı Nasıl Kullanılır?
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.

38,294 okuma, 04/10/2024

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

HTML <head>öğesi, aşağıdaki öğelerin bir kapsayıcısıdır: <title>, <style>, <meta>, <link>, <script>ve <base>.

34,431 okuma, 25/09/2025

HEAD Tagı Nasıl Kullanılır?
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.

33,691 okuma, 06/03/2015

Html Nedir? Ve Html Tag'leri
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.

31,689 okuma, 11/10/2024

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

30,769 okuma, 09/10/2025

P, PRE, B, EM, STRONG, I, SUP, SUB, DEL, CODE Taglar?
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

28,870 okuma, 06/03/2015

Genel HTML Tagları
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.

27,664 okuma, 04/10/2024

DOCTYPE Tagı Nasıl Kullanılır?
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

27,241 okuma,

IFRAME Tagı
HTML nedir?

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

27,241 okuma, 29/05/2014

HTML nedir?
FORM Tagı

Form tagı ve parametreleri

26,644 okuma, 18/10/2024

FORM Tagı
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

25,923 okuma, 11/10/2024

Meta Tag nedir?
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.

25,644 okuma, 08/10/2012

HTML Editörleri
xml xhtml html hakkında

Xml Html arasındaki fark

25,117 okuma, 11/10/2024

xml xhtml html hakkında
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.

24,843 okuma, 03/12/2012

HR Tag
HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Semantik (Anlamlı) Taglar

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

24,738 okuma, 16/10/2025

HTML5 nedir? HTML5 ile Kullanıma Giren Yeni Semantik (Anlamlı) Taglar
Arama Motorlarına Kayıt

23,934 okuma, 11/03/2014

Arama Motorlarına Kayıt
DIV Tagı Nedir?

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

23,536 okuma, 04/10/2024

DIV Tagı Nedir?
BR Tag

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

22,502 okuma, 03/12/2012

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

22,019 okuma, 05/12/2012

P Tag
U Tag

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

21,142 okuma, 03/12/2012

U Tag
Yükleniyor...
Yükleniyor...