İNTERNET PROGRAMCILIĞI I

Transkript

1 BÖLÜM 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... etiketleri arasına yazılır. 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 border="1"> < table> <TD< td> <td >1</td> <td >2</td> <td >3</td> <td>4</td> <td>5</td> <td>6</td> 10.1 <TABLE> ETİKETİ VE PARAMETRELERİ Burada width ve height parametrelerini aynen daha önce kullandığınız gibi kullanabilirsiniz... 20

2 bgcolor background border bordercolor bordercolorlight bordercolordark align nin içinin rengini belirler. içine resim koyar. etrafına yerleştireceğiniz çerçevenin kalınlığını belirler Çerçeve rengini belirler Çerçevenin sol ve üst kenarlarının rengini belirler Çerçevenin sağ ve alt kenarlarının rengini belirler. nin yatay konumu belirler <td></td> <table background="deneme.gif"> <td></td> <table border="5"> <td></td> <table border="5" bordercolor="teal"> <td></td> <table border="5" bordercolorlight="aqua"> <td></td> <table border="5" bordercolordark="blue"> <td></td> <table align="right"> <td></td> 21

3 cellspacing etrafındaki çerçevenin kalınlığını belirler. <table border="1" cellspacing="10"> <td></td> cellpadding içindeki elemanların (metin, resim, vs.) çerçeveden uzaklığını belirler. <table border="1" cellpadding="10"> <td></td> 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 background align <td bgcolor="teal"> </td> <td background="deneme.gif"> </td> <table border="1" width="100" height= "100"> <td align="right"> </td> 22

4 valign bordercolor colspan rowspan <table border="1" width="100" height="100"> <td valign="bottom"> </td> <table border="1"> <td bordercolor="blue"> </td> <table border="1"> <td>1</td><td>2</td><td>3</td> <td colspan="2">4</td><td>5</td> <td>6</td><td>7</td><td>8</td> <table border= "1"> <td>1</td><td>2</td><td>3</td> <td >4</td><td> rowspan="2">5</td><td>6</td> <td>7</td><td>8</td> 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. 23

5 10.3 TABLO UYGULAMALARI Bu uygulamaları önce kendimiz yapmaya çalışalım, eğer takılırsak kodlarından faydalanalım. Uygulama Küçük bir tablo uygulaması <td width="300" bgcolor="teal" align="center">uygulama</td> <td height="200" bgcolor="silver" align="center">küçük bir tablo uygulaması</td> Hosting 1.seçenek 20 Mb 100$/yıl 2.seçenek 50 Mb 150$/yıl 24

6 <table cellpadding="10" border=1> <td colspan="3" align="middle" bgcolor="red" >Hosting</td> <td bgcolor="teal">1.seçenek</td> <td align="middle">20 Mb</td> <td align="middle">100$/yıl </td> <td bgcolor="teal">2.seçenek</td> <td align="middle">50 Mb</td> <td align="middle"> 150$/yıl</td> SÜRÜCÜ CİNSİ HIZ CD-ROM 30X 40X 50X 60X DVD 10X 12X Cd-Dvd rom'lar <table BORDER="1" bgcolor="silver" bordercolor="black"> <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> <td>cd-rom</td> <td>30x</td> <td>40x</td> <td>50x</td> <td>60x</td> <td>dvd</td> 25

7 <td colspan="2">10x</td> <td colspan="2">12x</td> 26