OwnZ! StyLe
  Gelişmiş Tablo Yapımı
 

Tablolar

Web sayfanizdaki yazi ve resimlerin bulundugu yeri denetlemek için kullanacaginiz sey tablolardir. Her tabloda dikey ve yatay istediginiz kadar hücre olusturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazidiginiz yazilar tam olarak istediginiz yerde durabilir.

<table> Takısının Parametreleri

<table border=1>-> Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.
<table width=100> -> Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.
<table height=50> -> Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.
<table cellspacing=2> -> Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.
<table cellpadding=5>-> Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.
<table bgcolor=ffff00> -> Tablonun genel arka plan rengini belirlemek için kullanılır.
<table align=left> , <table align=right> , <table align=center>-> Tablonun konumunu ayarlamayı sağlar.
<table background=tugla.gif> -> Tablonun arkasına resim konulabilir.


<td> Takısının Parametreleri

Burada parametre kullanarak Tablo�nun hücrelerinin içeriğini sağa, sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz.

<td align=left> right; center -> Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.
<td bgcolor=00ffff> -> Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.
<td width=250> -> Hücre genişliğini belirlemek için kullanılır.
<td colspan=2> -> Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.
<td rowspan=2> -> Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.
<td background=hasan.gif> -> Hücrenin arka planına bir resim yerleştirir.


Tablo olusturmak için
<table>........... </table>


Yatay hücre olusturmak için
<tr>


Dikey hücre olusturmak için
<td>


<table border="1">
<tr>
<td>1.Hücre</td>
</tr>
<tr>
<td>2.Hücre</td>
</tr>
</table>
 


Bgcolor : Hücrenin içinin renklendirilmesi
<table>
<tr>
<td bgcolor=" red ">
kirmizi </td>
</tr>
</table>
 


Background : Hücre'ye arka plan vermek
<table>
<tr>
<td background="resim.gif ">
...
...
bir yazı yazınız
...
...
</td>
</tr>
</table>
 


Hücre'ye Resim Eklemek
<html>
<body bgcolor="white">
<center>
<br>
<table bgcolor="pink" align="center" border="3" cellpadding="5" cellspacing="15">
<tr>
<td><a href="3.jpg"><img src="3.jpg" width="200" height="150"></a></td>
<td><a href="4.jpg"><img src="4.jpg" width="200" height="150"></td>
</tr>
<tr>
<td><a href="5.jpg"><img src="5.jpg" width="200" height="150"></a></td>
<td ><a href="6.jpg"><img src="6.jpg" width="200" height="150"></td>
</tr>
</table>
</body>
</html>
 


Border : Hücre'nin kenarlarini kalinlastirmak
<table border="10">
<tr>
<td >Kalin kenar
</td>
</tr>
</table>
 


Bordercolor : Hücre'nin kenarlarini renklendirmek
<table border="10" bordercolor="green">
<tr>
<td> kenarını yeşil yaptım</td>
</tr>
</table>
 


Width - Height : Hücrenin boyutunu ayarlamak
<table border="5" width="200" height="60" >
<tr>
<td >Genislik:200 Yükseklik:60
</td>
</tr>
</table>
 


align : Yaziyi saga al
<table border="1" width="100" height="60" >
<tr>
<td align="right">Sag
</td>
</tr>
</table>
 


valign : Yaziyi alta al
<table border="1" width="100" height="60" >
<tr>
<td valign="bottom">Alt
</td>
</tr>
</table>
 


Colspan : Sütun birlestirmek
<table border="1">
<tr>
<td>1</td><td>2</td>
</tr>
<tr><td colspan="2" align=center>3</td>
</tr>
<tr><td>5</td><td>6</td>
</tr>
</table>
 


Rowspan : Satır birlestirmek
<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>
 


Cellpadding : Yazinin hücrenin kenarina degmemesi
<table border="1" cellpadding="5">
<tr>
<td>Değmiyor
</td>
</tr>
</table>
 


Cellspacing : Çerçevenin kalinligini ayarlar
<table border="1" cellspacing="5">
<tr>
<td>Çerçevenin kalinligi
</td>
</tr>
</table>
 


FRAME

Tablonun kenarlarını şekillendirmek için kullanılır.

<table frame="above">........</table>
 


Frame'in Parametreleri

<table frame="above"> -> üst çizgi
<table frame="below"> -> alt çizgi
<table frame="hsides"> -> yatay tüm çizgiler
<table frame="vsides"> -> dikey tüm çizgiler
<table frame="box"> -> tüm kutuları gösterir
<table frame="void"> -> boş gösterir
<table frame="lhs"> -> soldaki çizgiyi gösteriri
<table frame="rhs"> -> sağdaki çizgiyi gösterir



 
 
  103 ziyaretçi bugün sitemizi ziyaret etti! ( kişi Çevrimiçi )  
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol