Tablolar10.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>
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>
Konu: Tablolar 