Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Tablo İşlemleri
     admin     17.10.2012     09:09:48

Tablolar, web sayfalarının taslak görünümlerinin oluşturulması ve verilerin düzenli olarak gösterilmesi gibi önemli görevleri yerine getiren bir yapılardır. <TABLE> ve birkaç etiketin hiyerarşik düzen içerisinde bir araya gelmesiyle oluşurlar.



Etiketler :

<table> : Tablo oluşturmak için kullanılır.

<tr> : Tablo içinde satır oluşturmak için kullanılır.

<td> : Tablo içinde sütun(hücre) oluşturmak için kullanılır.

Örnek-1 : 1 satır, 2 sütun tablo

<table>

<tr>

  <td>AYHAN</td>

  <td>SARI</td>

</tr>

</table>

Örnek : 2 satır, 1 sütun tablo

<table>

<tr>

  <td>AYHAN</td>

</tr>

<tr>

  <td>SARI</td>

</tr>

</table>

 Yukarıdaki her iki örnekte de tablo ve hücre kenarında bir çizgi görmeyeceksiniz. Çünkü çizgi kalınlığı belirtilmedi.

Parametreler :

Border : Tablonun ve hücrenin kenar çizgi kalınlığını belirlemek için kullanılır.

Bordercolor : Tablonun ve hücrenin kenar çizgi rengini belirlemek için kullanılır.

Bgcolor : Tablonun veya bir hücrenin iç rengini belirler.

Colspan : Aynı satırdaki sütünları birleştirir.

Align: Hücre içi hizalama yapar(Center, Left, Right).

Background : Tablonun veya bir hücrenin arka plan resmini belirler.

Rowspan : Aynı sütundaki hücreleri birleştirir.

Width : Tablonun veya hücrenin pixel cinsinden genişliğini belirler.

Height: Tablonun veya hücrenin pixel cinsinden yüksekliğini belirler.

Cellspacing : Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.

Cellpadding : Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.
 

Örnek-3 : Border, Bordercolor, Colspan, bgcolor, align

<table border="1" bordercolor="red"> <!—Tablo ve hücre kenar çizgi kalınlığı 1px ve kırmızı renkli  -->

<!-- <table style="border:1px #FF0000 solid;">-->

<!-- CSS ile de özellik atayabilirsiniz. Mesela burada tablo çizgisi 1px kalınlığında, kırmızı ve düz çizgidir. Ancak bu kod ile hücre iç rengi oluşmaz. Ayrıca hücrede belirtilmesi gerekir. -->

 <tr>

   <td>ORDU EML</td>

   <td>ORDUSPOR</TD>

 </tr>

 <tr>

   <td colspan="2" align="center" bgcolor =”yellow”>ANADOLU TEKNİK</TD>

   <!-- colspan=2 ile bu hücre üst satırdaki 2 hücrenin toplamı kadar genişliğe sahip olur. -->

 </tr>

</table>

Örnek-4 : Background

<table background=”resim1.jpg”>

  <tr>

     <td background=”resim2.jpg”><td>AYHAN SARI</td>

  </tr>

</table>

 Örnek-4’te  sonucu görebilmeniz için 2 adet jpg dosyası oluşturarak(resim1 ve resim2), html dosyanızın olduğu klasöre atınız.

Örnek-5 : Rowspan

<html>

<body>

  <table border="1" bordercolor="red">

   <tr>

    <td>Türkiye</td>

                <td rowspan="2">Milli Eğitim Bakanlığı</td>

              <!-- Aynı sütundaki 2 hücreyi birleştirir. -->

   </tr>

   <tr>

                <td>Cumhuriyeti</td>

   </tr>                 

</body>

</html>

Örnek-6 : width, height

<table width=”200”> <!-- Tablo genişliği 200px -->

<td width=”200”> <!-- Hücre genişliği 200px -->

--------------- 

<table height=”200”> <!-- Tablo yüksekliği 200px -->

<td height=”200”> <!—Hücre yüksekliği 200px -->

Örnek-7 : Cellspacing, Cellpadding

1.Durum :

<table border=”2” bordercolor=”red” cellspacing=”1”>

 <tr><td>Deneme-1</td></tr>

 <tr><td>Deneme-2</td></tr>

</table>

2.Durum :

<table border=”2” bordercolor=”blue” cellspacing=”15”>

 <tr><td>Deneme-1</td></tr>

 <tr><td>Deneme-2</td></tr>

</table>

---------------------------------------------------------------------------------------

1.Durum:

<table border=”2” bordercolor=”red” cellspadding=”0”>

 <tr><td>Deneme-1</td></tr>

</table>

2.Durum:

<table border=”2” bordercolor=”blue” cellspadding=”15”>

 <tr><td>Deneme-2</td></tr>

</table>

 Bir sonraki derste görüşmek üzere  

Facebook'ta Paylaş    
Diğer HTML İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...