Web Site İçerik Bölümü

Html Kodları l Webmaster l Web Tasarım l Tr.gg l Css l Photoshop l Siteni Ekle l Web Dersleri

Profesyonel tablo yapı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>
 
 <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> 
Birinci sırada Hücre1
Birinci sırada Hücre2
Birinci sırada Hücre3
İkinci sırada Hücre4
İkinci sırada Hücre5
İkinci sırada Hücre6
Hücrenin içi renkli olsun (bgcolor)
<table>
<tr>
<td bgcolor="red">
kırmızı hücrem oldu</td>
</tr>
</table>
Kırmızı hücrem oldu
 
Hücrenin içinde resim istiyorsak (background)
<table>
<tr>
<td background="deneme.gif">
Heeyy burada kablumbiklerim vaarr</td>
</tr>
</table>
interweb-13 ile web dersleri

 
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">
<tr>
<td>kenarı ince oldu</td>
</tr>
</table>
kenarı kalın oldu
kenarı ince oldu
Hücrenin kenarını renkli yapmak istiyorsak (bordercolor)
<table border="10" bordercolor="green">
<tr>
<td>kenarını yeşil yaptım</td>
</tr>
</table>
kenarını yeşil yaptım
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>
genişliği 300 yüksekliği 80 piksel
Hücrenin içindeki yazı sağda olsun (align=" ")
<table border="1" width="150" height= "100">
<tr>
<td align="right">
DayDay</td>
</tr>
</table>
DayDay
Hücrenin içindeki yazı altta olsun (valign=" ")
<table border="1" width="150" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>
DayDay
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>
1
2
3
4
5
6
7
8
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>
1
2
3
4
5
6
7
8
Yazılar hücrenin kenarına değmesin (cellpadding)
<table border="1" cellpadding="15">
<tr>
<td>Değmiyor</td>
</tr>
</table>
Değmiyor
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>
Htmlyolu

Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur. Herşey deneyerek elde edilir.
 

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol