Mauris vulputate metus eu nisl. Praesent placerat. Mauris vitae erat id ante viverra sodales. Proin tincidunt porta velit. Praesen tplacerat. Mauris vitae erat id ante viverra sodales. Prointin cid
Mauris vulputate metus eu nisl. Praesent placerat. Mauris vitae erat id ante
Tablolar
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.
<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> |