|
Tablolar
10.TABLOLAR(TABLE)
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> |
|
|
background |
Hücre içine resim koyar. |
<table
background="deneme.gif">
<tr>
<td>Hücre</td>
</tr>
</table> |
|
|
border |
Hücre etrafına yerleştireceğiniz çerçevenin
kalınlığını belirler |
<table
border="5">
<tr>
<td>Hücre</td>
</tr>
</table> |
|
|
bordercolor |
Çerçeve rengini belirler |
<table
border="5" bordercolor="teal">
<tr>
<td>Hücre</td>
</tr>
</table> |
|
|
bordercolorlight |
Çerçevenin sol ve üst kenarlarının rengini
belirler |
<table
border="5" bordercolorlight="aqua">
<tr>
<td>Hücre</td>
</tr>
</table> |
|
|
bordercolordark |
Çerçevenin sağ ve alt kenarlarının rengini
belirler. |
<table
border="5" bordercolordark="blue">
<tr>
<td>Hücre</td>
</tr>
</table> |
|
|
align |
Hücrenin yatay konumu belirler |
<table
align="right">
<tr>
<td>Hücre</td>
</tr>
</table> |
|
|
cellspacing |
Hücre etrafındaki çerçevenin kalınlığını
belirler. |
<table
border="1" cellspacing="10">
<tr>
<td>Hücre</td>
</tr>
</table> |
|
|
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> |
|
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> |
|
|
background |
<table>
<tr>
<td background="deneme.gif">
Hücre</td>
</tr>
</table> |
|
|
align |
<table border="1" width="100" height=
"100">
<tr>
<td align="right">
Hücre</td>
</tr>
</table> |
|
|
valign |
<table border="1" width="100" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table> |
|
|
bordercolor |
<table border="1">
<tr>
<td bordercolor="blue">
Hücre</td>
</tr>
</table> |
|
|
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> |
|
|
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> |
|
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> |
  | 
