HÜCRE VE GENİŞLİK:
Tabloya genişlik vermeden hücreye pixel ile genişlik verme:
<td width="......">................</td>
Yukardaki birinci noktalı alana değerler verilerek hücrenin genişliği belirlenir.Verilen
değerler pixel cinsindendir.Bu durumda hücrenin yüksekliği ikinci noktalı alandaki yazının
yüksekliğine göre otomatik ayarlanır.
Örnek;(Birinci hücreye 100 pixel ve ikinci hücreye 300 pixel genişlik verelim.)
<table border="10">
<tr>
<td width="100">hücre 1</td><td width="300">hücre 2</td>
</tr>
</table>
Tablo genişliğine pixel cinsinden değer verdikten sonra hücreye % ile genişlik verme:
Önce tablo genişliğine pixel olarak değer vereceğiz .Tablo genişliği 300 pixel olsun.
Birinci hücreye tablo genişliğinin %30'unu(90 pixel) verelim.İkinci hücreye tablo
genişliğinin %70'ini (210 pixel) verelim .
Örnek;
<table border="10" width="300">
<tr>
<td width="30%">hücre 1</td><td width="70%">hücre 2</td>
</tr>
</table>
Tablo genişliğini ekran genişliğinin %'si ile değer vererek hücrelere %'li değer atamak.
Örnek 1;
Tablo genişliği ekran genişliği ile aynı olsun.Yani %100 olsun.
Birinci hücre Tablo genişliğinin %25'i olsun.
İkinci hücre tablo genişliğinin %75'i olsun.
Yazılım;
<table border="10" width="100%">
<tr>
<td width="25%">hücre 1</td><td width="75%">hücre 2</td>
</tr>
</table>
Yazılımın web sayfasındaki görünümü;
Örnek 2;
Tablo genişliğini ekran genişliğinin %50'si olarakatayalım.Birinci hücre tablo genişliğinin %25'i ve ikinci hücre tablo genişliğinin %75'i olsun.
Yazılım;
<table border="10" width="50%">
<tr>
<td width="25%">hücre 1</td><td width="75%">hücre 2</td>
</tr>
</table>
Yazılımın web sayfasındaki görünümü;
ROWSPAN VE COLSPAN:
rowspan: alt alta bulunan satırlardaki hücrelerin birleştirilmesi
colspan:aynı satırdaki hücrelerin birleştirilmesi.
Aşağıda dokuz hücreli bir tablonuun yazılımı ve web sayfasındaki görünümü verilmiştir.
Yazılım;
<table border="10">
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>
Web sayfasındaki görünüm;
| 1.satır 1.hücre |
1.satır 2.hücre |
1.satır3.hücre |
| 2.satır 1.hücre |
2.satır 2.hücre |
2.satır 3.hücre |
| 3.satır 1.hücre |
3.satır 2.hücre |
3.satır 3.hücre |
Yukardaki tabloya rowspan ve colspan uygulayalım.
1.satır 3.hücre ile 2.satır 3. hücre yi birleştirelim(rowspan yapalım yani rowspan="2")
3.satır 1.hücre ile 3.satır 2.hücre yi birleştirelim (colspan yapalım yani colspan="2")
Örnek;
Yazılım
<table border="10">
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td>
<td rowspan="2">rowspan hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td>
<tr><
td colspan="2">colspan hücre</td><td>3.satır 3.hücre >/td>
Yazılımın web sitesindeki görünümü ;
| 1.satır 1.hücre |
1.satır 2.hücre |
rowspan hücre |
| 2.satır 1.hücre |
2.satır 2.hücre |
| colspan hücre |
3.satır 3.hücre |
Yukarıdaki uygulamanın sonunda satırların hücre durumları aşağıdaki gibi oluştu;
Birinci satır(3 adet hücre) =(1.satır 1.hücre),(1.satır 2. hücre),(rowspan hücre)
İkinci satır (2 adet hücre) =(2.satır 1. hücre),(2. satır 2. hücre)
Üçüncü satır(2 adet hücre)=(colspan hücre),(3. satır 3. hücre)
CELLPADDİNG VE CELLSPACING:
cellpadding , cellspacing
cellpadding:hücre içindeki yazının hücre kenarına olan uzaklığdır.
cellspacing:hücreler arasındaki uzaklıktır.Aynı zamanda hücrenin tablo kenarına uzaklığıdır.
cellpadding ve cellspacing özelliklerinin şablonu aşağıdadır.
Şablon;
<table border="10" cellpadding=".........." cellspacing=".............">
<tr> <td>1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>
Örnek 1 ;
Bu örnekte cellpadding değerini 10 pixel ve cellspcing değerini 30 pixel atayalım.
Yazılım;
<table border="10" cellpadding="
10" cellspacing="
30">
<tr> <td >1.satır 1.hücre</td><td>1.satır 2.hücre</td><td>1.satır3.hücre</td></tr>
<tr ><td>2.satır 1.hücre</td><td>2.satır 2.hücre</td><td>2.satır 3.hücre</td></tr>
<tr ><td>3.satır 1.hücre</td><td>3.satır 2.hücre</td><td>3.satır 3.hücre</td></tr>
</table>
Yazılımın web sitesindeki görünümü;
| 1.satır 1.hücre |
1.satır 2.hücre |
1.satır3.hücre |
| 2.satır 1.hücre |
2.satır 2.hücre |
2.satır 3.hücre |
| 3.satır 1.hücre |
3.satır 2.hücre |
3.satır 3.hücre |
Örnek 2 ;
Yazılım;
<table border="10" cellpadding="
10" cellspacing="
30">
<tr bgcolor ="yellow"><td>IIIIIIIIIIIIIII</td><td>IIIIIIIIIIIIIII</td></tr>
<tr bgcolor ="yellow"><td>IIIIIIIIIIIIIII</td><td>IIIIIIIIIIIIIII</td></tr>
</table>
Yazılımın web sitesindeki görünümü ;
| IIIIIIIIIIIIIII |
IIIIIIIIIIIIIII |
| IIIIIIIIIIIIIII |
IIIIIIIIIIIIIII |
Yukarıdaki tabloda mavi boşluklar cellspacing'dir.
Yukarıdaki tabloda merdiven (IIIIIIIIIIIIIII)dışındaki sarı boşluklar cellpadding'dir.