Tablo Oluşturma Html-Web Tasarım ve Programlama Ders 5

Tablo Oluşturma Html-Web Tasarım ve Programlama Ders 5                 

                 

Html’de yapılmış  tablo örnekleri için link :  http://www.gorselprogramlama.com/tablo-olusturma-ornekleri-html-web-tasarim-ve-programlama          

Tablo Oluşturma:  Html dilinde tablo  oluşturmak için <table> </table> etiketi arasına yazılır. Satır oluşturmak için tr, sütun oluşturmak için td etiketi kullanılır.                 

Not: Oluşturduğunuz tabloda boş hücre kullacaksanız td etiketi arasına &nbsp eklemelisniz.Yoksa çizgiler gözükmez.                 

Aşağıdaki tabloyu html dili ile oluşturalım.                 

                 

3 satır , 3 sütun bulunuyor.                 

      

<html>      

<head>      

<title>Tablo işlemleri</title>      

<head>      

<body>      

<table border="1">      

<tr>      

<td>&nbsp</td> <td>Eylül</td> <td>Ekim</td>      

</tr>      

<tr>      

<td>Ford</td><td>123</td><td>114</td>      

</tr>      

<tr>      

<td>Bmw</td><td>104</td><td>109</td>      

</tr>      

</table>      

</body>      

</html>      

        

                 

                 

table yanındaki border=”1″ tablonun dış kenar çizgi kalınlığını belirliyor.Farklı bir değer kullanabilirsiniz.İlk hücre boş olduğu için &nbsp yazdık.Eğer yazmasaydık kenar çizgileri gözükmezdi. Kaydedip çalıştıralım.                  

                 

                 

Table içinde kullanılabilecek özellikler:                 

border: Dış kenar çizgi kalınlığı                 

width:Tablonun piksel olarak genişliğini belirler.                 

height:Tablonun piksel olarak yüksekliğini belirler.                 

bordercolor: Tablonun çizgi rengini belirler.                 

bgcolor: :Tablonun arkaplan rengini belirler.Bu özellik satır (tr) ve hücre (td) arka plan rengi içinde kullanılır.                 

bordercolorlight: Tablonun dış kenar çizgisindeki aydınlık kısmın  rengini belirler.             

bordercolordark: Tablonun dış kenarındaki karanlık kısmın rengini belirler.             

Aşağıdaki tabloyu oluşturalım.                 

                

      

<html>      

<head>      

<title>Tablo İşlemleri</title>      

</head>      

<body>      

<table border="1" width="200" height="150" bordercolor="blue" bgcolor="yellow">      

<tr>      

<td>&nbsp</td><td>Eylül</td><td>Ekim</td>      

</tr>      

<tr>      

<td>Ford</td><td>123</td><td>114</td>      

</tr>      

<tr>      

<td>Bmw</td><td>104</td><td>109</td>      

</tr>      

</table>      

</body>      

</html>      

                

                  

                 

                  

Aşağıdaki tabloyu oluşturalım.                 

            

     

<html>     

<head>     

<title>Tablo İşlemleri</title>     

</head>     

<body>     

<table border="1" width="200" height="150" bordercolor="blue" bgcolor="yellow">     

<tr bgcolor="red">     

<td>&nbsp</td><td>Eylül</td><td>Ekim</td>     

</tr>     

<tr>     

<td>Ford</td><td>123</td><td>114</td>     

</tr>     

<tr>     

<td>Bmw</td><td>104</td><td>109</td>     

</table>     

</body>     

</html>     

                

 Yukarıda 1.satırı kırmızı yapmak için birinci tr etiketi içine bgcolor=”red” yazdğımıza dikkat edin.               

               

                 

Aşağıdaki tabloyu oluşturalım.                 

           

        

    

<html>    

<head>    

<title>Tablo İşlemleri</title>    

</head>    

<body>    

<table border="1" width="200" height="150" bordercolor="blue" bgcolor="yellow">    

<tr bgcolor="red">    

<td>&nbsp</td><td>Eylül</td><td>Ekim</td>    

</tr>    

<tr>    

<td>Ford</td><td>123</td><td>114</td>    

</tr>    

<tr>    

<td>Bmw</td><td>104</td><td bgcolor="#66FFFF">109</td>    

</tr>    

</table>    

</body>    

</html>    

         

                 

 Yukarıda 3. satır 3. hücreyi su rengi yapmak için 3. tr içindeki 3. td etiketi içine bgcolor=”#66FFFF” yazdğımıza dikkat edin.                 

Önemli Not:   Renkler için ingilizce ismi veya 16’lık sayı sistemindeki değeri yazılır.Her ikiside kullanılabilir. Ör: siyah için black veya #00000 ,beyaz için white veya#FFFFFF             

                 

            

Html’de yapılmış  tablo örnekleri için link :  http://www.gorselprogramlama.com/tablo-olusturma-ornekleri-html-web-tasarim-ve-programlama          

*********           

align:  Veriyi yatay olarak hizalamak için kullanılır. left:sola , right: sağa , center:ortaya hizalar.               

valign:  Veriyi dikey olarak hizalamak için kullanılır. top: üste , bottom: alta , middle:ortaya hizalar.                

align ve valign birarada kullanılabilir.Mesela üste sağa hizalamak için <td align=”right” valign=”top”>gorselprogramlama.com</td> kullanılır.               

Aşağıdaki tabloyu hazırlayalım.               

                

  

   

<html>   

<head>   

<title>Tablo İşlemleri</title>   

</head>   

<body>   

<table border="1" width="350" height="200" bordercolor="green" bgcolor="yellow">   

<tr bgcolor="red">   

<td>&amp;nbsp</td><td align="right">Eylül</td><td valign="top">Ekim</td>   

</tr>   

<tr>   

<td>Ford</td><td align="right" , valign="bottom">123</td><td>114</td>   

</tr>   

<tr>   

<td>Bmw</td><td>104</td><td>109</td>   

</table>   

</body>   

</html>   

               

                

*********           

Satır birleştirmek için colspan özelliği kullanılır. ör: colspan=”3″ i yanyana olan üç hücreyi birleştirir.                 

Sütun birleştirmek için rowspan özelliği kullanılır. ör: rowspan=”5″ i altalta olan beş hücreyi birleştirir.                  

Aşağıdaki tabloyu hazırlayalım.                    

                 

                 

             

   

<html>   

<head>   

<title>Tablo İşlemleri</title>   

</head>   

<body>   

<table border="1" width="400" height="200" bordercolor="blue" bgcolor="yellow">   

<tr bgcolor="silver">   

<td>&nbsp</td><td>&nbsp</td><td align="center" colspan="2">2006</td>   

</tr>   

<tr bgcolor="red">   

<td>&amp;nbsp</td><td>&amp;nbsp</td><td>Eylül</td><td>Ekim</td>   

</tr>   

<tr>   

<td rowspan="2">Ford</td><td>Fiesta</td><td>123</td><td>114</td>   

</tr>   

<tr>   

<td>Focus</td><td>104</td><td>109</td>   

</table>   

</body>   

</html>   

     

                 

                 

*********           

Tablo oluşturuken hücre verilerini başlık olarak yazmak için th etiketi kullanılır.<th></th> etiketi arasına yazılan hücreler başlık olarak yazılır.                

Aşağıdaki tabloyu hazırlayalım:2006,Eylül,Ekim,Ford,Fiesta,Focus başlık konumundadır.                

              

  

<html>  

<head>  

<title>Tablo İşlemleri</title>  

</head>  

<body>  

<table border="1" width="400" height="200" bordercolor="blue" bgcolor="yellow">  

<tr bgcolor="silver">  

<td>&nbsp</td> <td>&nbsp</td> <th align="center" colspan="2">2006</th>  

</tr>  

<tr bgcolor="red">  

<td>&nbsp</td> <td>&nbsp</td> <th>Eylül</th><th>Ekim</th>  

</tr>  

<tr>  

<th rowspan="2">Ford</th><th>Fiesta</th><td>123</td><td>114</td>  

</tr>  

<tr>  

<th>Focus</th><td>104</td><td>109</td>  

</table>  

</body>  

</html>  

                 

                  

                 

*********           

Tablonun üstüne başlık eklemek için thead etiketi kullanılır.Tablonun altına veya üstüne ikinci bir başlık eklemek için caption etiketi kullanılır.                

Aşağıdaki tabloyu hazırlayalım.                

  

  

<html>  

<head>  

<title>Tablo İşlemleri</title>  

</head>  

<body>  

<table border="1" width="400" height="200" bordercolor="blue" bgcolor="yellow">  

<thead>Satış Tablosu</thead>  

<caption align="bottom">Tablo 1.1 araç satış</caption>  

<tr bgcolor="silver">  

<td>&nbsp</td> <td>&nbsp</td><th align="center" colspan="2">2006</th>  

</tr>  

<tr bgcolor="red">  

<td>&nbsp</td> <td>&nbsp</td><th>Eylül</th><th>Ekim</th>  

</tr>  

<tr>  

<th rowspan="2">Ford</th><th>Fiesta</th><td>123</td><td>114</td>  

</tr>  

<tr>  

<th>Focus</th><td>104</td><td>109</td>  

</table>  

</body>  

</html>  

                

                

                 

                  

*********           

Tabloda hücreler ile dış kenarlık arasında boşluk bırakmak istiyorsak cellspacing özelliğini kullanabiliriz.                

                

Yukarıdaki tablonun cellspacing değerini 7 yapalım.                

 

<html> 

<head> 

<title>Tablo İşlemleri</title> 

</head> 

<body> 

<table border="1" bordercolor="green" cellspacing="7"> 

<tr> 

<td>&nbsp</td><td>Eylül</td><td>Ekim</td> 

</tr> 

<tr> 

<td>Ford</td><td>123</td><td>114</td> 

</tr> 

<tr> 

<td>Bmw</td><td>104</td><td>109</td> 

</tr> 

</table> 

</body> 

</html> 

                 

                 

                 

                  

cellspacing değerini 16 yapalım.                

 

<html> 

<head> 

<title>Tablo İşlemleri</title> 

</head> 

<body> 

<table border="1" bordercolor="green" cellspacing="16"> 

<tr> 

<td>&nbsp</td><td>Eylül</td><td>Ekim</td> 

</tr> 

<tr> 

<td>Ford</td><td>123</td><td>114</td> 

<tr> 

<td>Bmw</td><td>104</td><td>109</td> 

</table> 

</body> 

</html> 

                 

                 

Yukarıda iki tablo arasındaki farkı görüyüruz.                

*********           

Tabloda hücreler verileri  ile kenarlık arasında boşluk bırakmak istiyorsak cellpadding özelliğini kullanabiliriz.                

                 

,                 

                  

cellpadding değerini 12 yapalım.                

 

<html> 

<head> 

<title>Tablo İşlemleri</title> 

</head> 

<body> 

<table border="1" bordercolor="green" cellpadding="12"> 

<tr> 

<td>&nbsp</td><td>Eylül</td><td>Ekim</td> 

</tr> 

<tr> 

<td>Ford</td><td>123</td><td>114</td> 

</tr> 

<tr> 

<td>Bmw</td><td>104</td><td>109</td> 

</table> 

</body> 

</html> 

                 

                 

cellpadding değerini 25 yaptğımızda aşağıdaki görüntüyü elde ederiz.                

                 

Yukarıda iki tablo arasındaki farkı görüyüruz.                  

           

Html’de yapılmış  tablo örnekleri için link   http://www.gorselprogramlama.com/tablo-olusturma-ornekleri-html-web-tasarim-ve-programlama          

           

                  







Rica: Sitemizin Google'da Ön Sıralarda Çıkması İçin Lütfen Alttaki Google+ Butonuna Tıklayınız , Sayfamızı Facebookta Beğeniniz veya yazıları Twitter,Facebookta paylaşınız.
Paylaş :
14 Ekim Perşembe,2010 Tarihinde Yayınlanmıştır. Bulunduğu Kategori : Dersler, Html
  1. Eki 16th, 2010 at 12:04 | #1

    Hocam Kendi Temamızı Hazırlamamız icin Gerekli Kodları Paylasırsanız Sevinirimm..

  2. admin
    Eki 16th, 2010 at 12:10 | #2

    İleri derslerde olabilir.

  3. Ağu 18th, 2012 at 13:57 | #3

    Özenle hazırlanmış,çok güzel bilgiler buldum burada.Hazırlayan ve emeği geçenlere teşekkürler.

  4. merve
    Kas 10th, 2012 at 22:19 | #4

    derste anlamadıklarımı anladım gayet başarılı fakat keşke iç içe tablolardanda bahsedilseymiş

  5. Alp SALGAR
    Mar 27th, 2013 at 13:31 | #5

    yazılıda da bu kadar sorsalar güzel olurdu

  6. emre
    Ara 7th, 2014 at 16:31 | #6

    mukenbel ya

  7. arzu
    May 7th, 2015 at 20:49 | #7

    Final ödevim için hazırlayacağım bir konu için saatlerdir düşündüğüm tabloyu burada bulduğum için çok mutluyum. Kendi konuma göre biraz daha düşünmem lazım sadece
    Yapacağım tablo cumartesi ve pazar gününe ait 11 farklı gazetenin manşetindeki haberlerinin kapladığı alan olacaktı ki bu sayede hangi gazete hangi habere ne kadar yer ayırmış rahatça olacak tablomda harika bir ödev yapmış olacagım aklına benım verılerımle ılgılı tablo gelen paylasırsa sevınırım tsekkurler

  8. May 22nd, 2015 at 17:51 | #8

    html tablo için güzel sayfa

Yorum Yazın ...

XHTML: Bu Etiketleri Kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>