22-08-2007, 02:01
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
Yatay hücre oluşturmak için
Dikey hücre oluşturmak için
6 bömüme (hücreye) ayrılmış bir tablo yapalım
Resimleri Ve Linkleri Görebilmek İçin KAYIT Olun veya GİRİŞ Yapın
Hücremin içi renkli olsun (bgcolor)
Resimleri Ve Linkleri Görebilmek İçin KAYIT Olun veya GİRİŞ Yapın
Hücremin içinde resim istiyorum (background)
Hücremin kenar kalınlığını değiştirmek istiyorum (border)
KALIN İÇİN
İNCE İÇİN
Hücremin kenarını renkli yapmak istiyorum (bordercolor)
Hücremin içini de renkli yapmak istiyorum (bgcolor)
Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")
Hücremin içindeki yazı sağda olsun (align=" ")
Hücremin içindeki yazı altta olsun (valign=" ")
Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan)
Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan)
Yazılarım hücrenin kenarına değmesin (cellpadding)
Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing)
Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur.
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
Kod:
<table> ...</table>Yatay hücre oluşturmak için
Kod:
<tr>Dikey hücre oluşturmak için
Kod:
<td>6 bömüme (hücreye) ayrılmış bir tablo yapalım
Kod:
<table border="1">
<tr>
<td>Birinci sırada Hücre1</td>
<td>Birinci sırada Hücre2</td>
<td>Birinci sırada Hücre3</td>
</tr>
<tr>
<td>İkinci sırada Hücre1</td>
<td>İkinci sırada Hücre2</td>
<td>İkinci sırada Hücre3</td>
</tr>
</table>Resimleri Ve Linkleri Görebilmek İçin KAYIT Olun veya GİRİŞ Yapın
Hücremin içi renkli olsun (bgcolor)
Kod:
<table>
<tr>
<td bgcolor="red">
kırmızı hücrem oldu</td>
</tr>
</table>Resimleri Ve Linkleri Görebilmek İçin KAYIT Olun veya GİRİŞ Yapın
Hücremin içinde resim istiyorum (background)
Kod:
<table>
<tr>
<td background="deneme.gif">
Heeyy burada kablumbiklerim vaarr</td>
</tr>
</table>Hücremin kenar kalınlığını değiştirmek istiyorum (border)
KALIN İÇİN
Kod:
<table border="10">
<tr>
<td>kenarı kalın oldu</td>
</tr>
</table>Kod:
<table border="1">
<tr>
<td>kenarı ince oldu</td>
</tr>
</table>Hücremin kenarını renkli yapmak istiyorum (bordercolor)
Kod:
<table border="10" bordercolor="green">
<tr>
<td>kenarını yeşil yaptım</td>
</tr>
</table>Hücremin içini de renkli yapmak istiyorum (bgcolor)
Kod:
<table border="10" bordercolor="red">
<tr bgcolor="yellow">
<td>kenarını yeşil yaptım</td>
</tr>
</table>Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")
Kod:
<table border="10" width="300" height="80" >
<tr>
<td>genişliği 250 yüksekliği 80 piksel</td>
</tr>
</table>Hücremin içindeki yazı sağda olsun (align=" ")
Kod:
<table border="1" width="150" height= "100">
<tr>
<td align="right">
DayDay</td>
</tr>
</table>Hücremin içindeki yazı altta olsun (valign=" ")
Kod:
<table border="1" width="150" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan)
Kod:
<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>Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan)
Kod:
<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ım hücrenin kenarına değmesin (cellpadding)
Kod:
<table border="1" cellpadding="15">
<tr>
<td>Değmiyor</td>
</tr>
</table>Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing)
Kod:
<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.