Sitemize Hoş Geldiniz.
Web Tasarım | Photoshop | Html Kod Arşivi | Arkaplan | MSN | Vs.
tabloyapımı
Tablo yapmayı öğreniyoruz
|
|||||||
Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır. Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir. Tablo için kullanacağımız temel etiketler aşağıdakilerdir. |
|||||||
Tablo oluşturmak için | |||||||
<table> </table> | |||||||
Yatay hücre oluşturmak için | |||||||
<tr> | |||||||
Dikey hücre oluşturmak için | |||||||
<td> | |||||||
6 bömüme (hücreye) ayrılmış bir tablo yapalım | |||||||
<table border="1"> <tr>
</table> |
|||||||
|
|||||||
Hücrenin içi renkli olsun (bgcolor) | |||||||
<table> <tr> <td bgcolor="red"> kırmızı hücrem oldu</td> </tr> </table> |
|||||||
|
|||||||
Hücrenin içinde resim istiyorsak (background) | |||||||
<table> <tr> <td background="deneme.gif"> Heeyy burada kablumbiklerim vaarr</td> </tr> </table> |
|||||||
|
|||||||
Hücrenin kenar kalınlığını değiştirmek istiyorsak (border) | |||||||
<table border="10"> <tr> <td>kenarı kalın oldu</td> </tr> </table> |
<table border="1"> |
||||||
|
|
||||||
Hücrenin kenarını renkli yapmak istiyorsak (bordercolor) | |||||||
<table border="10" bordercolor="green"> <tr> <td>kenarını yeşil yaptım</td> </tr> </table> |
|||||||
|
Hücrenin büyüklüğünü ayarlamak istiyorsak (width=" " height=" ") | ||||||||||
<table border="10" width="300" height="80" > <tr> <td>genişliği 250 yüksekliği 80 piksel</td> </tr> </table> |
||||||||||
|
||||||||||
Hücrenin içindeki yazı sağda olsun (align=" ") | ||||||||||
<table border="1" width="150" height= "100"> <tr> <td align="right"> DayDay</td> </tr> </table> |
||||||||||
|
||||||||||
Hücrenin içindeki yazı altta olsun (valign=" ") | ||||||||||
<table border="1" width="150" height="100"> <tr> <td valign="bottom"> Hücre</td> </tr> </table> |
||||||||||
|
||||||||||
Tablodaki yan yana iki hücreyi birleştirmek istiyorsak: (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> |
||||||||||
|
||||||||||
Tablodaki alt alta iki hücreyi birleştirmek istiyorsak: (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> |
||||||||||
|
||||||||||
Yazılar hücrenin kenarına değmesin (cellpadding) | ||||||||||
<table border="1" cellpadding="15"> <tr> <td>Değmiyor</td> </tr> </table> |
||||||||||
|
||||||||||
Hücrenin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing) | ||||||||||
<table border="1" cellspacing="15"> <tr> <td>Etrafında boşluk var</td> </tr> </table> |
||||||||||
|
||||||||||
Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur. Herşey deneyerek elde edilir. |