Gorsel Programlama | Görsel Programlama | C#.Net | VB.Net | C# Console

ana sayfa > Dersler, Html > Tablo Oluşturma Html-Web Tasarım ve Programlama Ders 5

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

Perşembe, 14 Eki 2010 yorum ekle yorumlara git

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



Böyle bir web sayfam olsun diyorsanız iletişim bölümünden veya [email protected] mail adresinden bize ulaşabilirsiniz.


Tüm cep telefonu aksesuar fırsatları için tıklayın !

  1. şimdilik yorum yok.
  1. şimdilik geri bağlantı yok