bilgicubugu
  WEB DERSLERİ-7
 

Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir sayfa tasarlamak için tablolara hakim olmak gereklidir.
Tablolar <table>...</table> etiketleri arasına yazılır.<tr> etiketi bir yatay sıra oluşturulur, bu yatay sıra istenilen sayıda <td> etiketiyle hücrelere bölünür.Aşağıdaki örneğe bakarak tablo mantığını anlayabilirsiniz.
< table> Hücre1
Hücre2
Hücre3
Hücre4
Hücre5
Hücre6
<TD< td>
     
 <table border="1">
<tr>
 
 <td >Hücre1</td>
 <td >Hücre2</td>
 <td >Hücre3</td>
 
</tr>
<tr>
 <td>Hücre4</td>
 <td>Hücre5</td>
 <td>Hücre6</td>
</tr>
</table> 
 
10/1. <TABLE> ETİKETİ VE PARAMETRELERİ
Burada width ve height parametrelerini aynen daha önce kullandığınız gibi kullanabilirsiniz...
bgcolor
Hücrenin içinin rengini belirler.
<table>
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
background
Hücre içine resim koyar.
<table background="deneme.gif">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
border
Hücre etrafına yerleştireceğiniz çerçevenin kalınlığını belirler
<table border="5">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
bordercolor
Çerçeve rengini belirler
<table border="5" bordercolor="teal">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
bordercolorlight
Çerçevenin sol ve üst kenarlarının rengini belirler
<table border="5" bordercolorlight="aqua">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
bordercolordark
Çerçevenin sağ ve alt kenarlarının rengini belirler.
<table border="5" bordercolordark="blue">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
align
Hücrenin yatay konumu belirler
<table align="right">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
cellspacing
Hücre etrafındaki çerçevenin kalınlığını belirler.
<table border="1" cellspacing="10">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
cellpadding
Hücre içindeki elemanların (metin, resim, vs.) çerçeveden uzaklığını belirler.
<table border="1" cellpadding="10">
<tr>
<td>Hücre</td>
</tr>
</table>
Hücre
 
10/2. <TR> ve <TD> ETİKETLERİ
<TR> etiketi, üzerine <td> etiketiyle hücreler döşenmesi için yatay bir sıra,bir platform oluşturur.Dolayısıyla bu etiketin parametreleri herhangi bir işimize yaramaz. Tablo içindeki bütün düzenlemeleri aşağıda parametreleri verilen <td> etiketiyle yapabiliriz.
bgcolor
<table>
<tr>
<td bgcolor="teal">
Hücre</td>
</tr>
</table>
Hücre
 
background
<table>
<tr>
<td background="deneme.gif">
Hücre</td>
</tr>
</table>
Hücre
 
align
<table border="1" width="100" height= "100">
<tr>
<td align="right">
Hücre</td>
</tr>
</table>
Hücre
 
valign
<table border="1" width="100" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>
Hücre
 
bordercolor
<table border="1">
<tr>
<td bordercolor="blue">
Hücre</td>
</tr>
</table>
Hücre
 
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
 
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
 
Yukarıdaki parametrelerden colspan yatay eksen üzerindeki iki hücreyi birleştirmek için kullanılır. Bu parametreye değer olarak birleşecek hücre sayısı verilir. Rowspan ise bu işi dikey eksen üzerindeki iki hücre için yapar. diğer parametrelerin kullanımlarını zaten başka etiketler üzerinde gördük.
 10/3. TABLO UYGULAMALARI
Bu uygulamaları önce kendiniz yapmaya çalışın, eğer takılırsanız kodlarından faydalanın.
Uygulama
Küçük bir tablo uygulaması
 
<table>
<tr>
 <td width="300" bgcolor="teal" align="center">Uygulama</td>
</tr>
<tr>
 <td height="200" bgcolor="silver" align="center">Küçük bir tablo uygulaması</td>
</tr>
</table>
 

Hosting
1.seçenek
20 Mb
100$/yıl
2.seçenek
50 Mb
150$/yıl
 
<table cellpadding="10" border=1>
<tr>
 <td colspan="3" align="middle" bgcolor="red" >Hosting</td>
 
</tr>
<tr>
 <td bgcolor="teal">1.seçenek</td>
 <td align="middle">20 Mb</td>
 <td align="middle">100$/yıl </td>
</tr>
<tr>
 <td bgcolor="teal">2.seçenek</td>
 <td align="middle">50 Mb</td>
 <td align="middle"> 150$/yıl</td>
</tr>
</table>

SÜRÜCÜ CİNSİ
HIZ
Cd-Dvd rom'lar
CD-ROM
30X
40X
50X
60X
DVD
10X
12X
 
 
 
 
 
 
 
<table BORDER="1" bgcolor="silver" bordercolor="black">
<tr>
 <td bgcolor="red">SÜRÜCÜ CİNSİ</td>
 <td bgcolor="red" colspan="4" align="center">HIZ</td>
 <td bgcolor="teal" color="white" rowspan="3"> Cd-Dvd rom'lar</td>
</tr>
<tr>
 <td>CD-ROM</td>
 <td>30X</td>
 <td>40X</td>
 <td>50X</td>
 <td>60X</td>
</tr>
<tr>
 <td>DVD</td>
 
 <td colspan="2">10X</td>
 <td colspan="2">12X</td>
 
</tr>
</table>
 
  Copright 2010 salih cemaloğlu bilgi cubugu  
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=