Grafik destekli Web programlarinin tablo destegi ile çok çesitli istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu gösterilebilir. Tablo hazirlama basligi altindaki örnekler, her çesit tablonun olusturulmasi için yeterli degildir. Kullanici, istegi dogrultusunda bunlari gerçeklestirmelidir.

Ekranda tablo gösterirken, o an kullanilan pencerenin büyüklügüne ve tablo içindeki metinin genisligine göre tablonun en ve boyu degisebilir.

Tablo, satir ve sütunlardan olustugu için her hücre ayri ayri tanimlanir. Her satir ve sütun, kendi içinde baska satir ve sütunlari ihtiva edebilir.

Tablolara baslik, liste, paragraf, form, figür ve her formatta metin konabilir ve Örnek olarak belirtmem gerekirse sizlere şu örnekler ile göstere bilirim.

HTML-Kodu:
<TABLE BORDER> <TR><TH ROWSPAN=2><TH COLSPAN=2>Average <TH ROWSPAN=2>other<BR>category<TH>Misc <TR><TH>height<TH>weight <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003 <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002 </TABLE>
Yukarıda vermiş olduğum html cod satırlarını kullandığımız zaman ekranımıza aşağıdaki gibi bir görüntü gelecektir.Bunu istediğiniz gibi değiştirmek isterseniz bunu yapmak elbette mümkün şimdi sözlerimi kısa keserek ekranımıza ne gibi bir görüntü geleceğini aşağıda hep beraber görelim.

http://www.fmtr.net/attachment.php?a...d=11666442 93

Burada dikkat edilmesi gereken konularımızı aşağıda detaylı bir şekilde anlattım ve bunları çok dikkatli şekilde görmek, uygulamalar yaparken dikkat edeceğimiz kısımlardır.

. Default olarak, header hücreler merkeze alinir, digerleri saga yanasik olarak ekrana gelirler. Bunu engellemek için hücre için <ALIGN=.. belirteci, tüm tablo için <COLSPEC=.. belirteci kullanilir.

. Her hücre bos olabilir.

. Tablodaki her satirdaki kolon sayisinin esit olmadigi durumlarda kayip hücreler tablonun sagina yerlestirilir ve içleri bos kalir.

. Tablodaki satir sayisi <tr belirteci tarafindan belirlenir.

. <th> ve <tc> belirteçleri sadece <tr> belirteçleri arasinda olabilir.

. Hücrelerin üstüste gelmesi istenmeyen sonuçlar yaratabilir.

Tablo ebadi

Tüm tablonun uzunlugu, en genis satirla belirlenir. Kelimeler kisaltilmadigi için paragraflar <br> ile kesilmedikçe ekrana gelirler. En kisa uzunluk da en genis kelime veya resmin uzunlugu ile bagintilidir.

Align
Tablonun dik halinin nasil olacagini belirler.

Left
Metini ekranin soluna yanasik yazar.

Right
Metini ekranin sagina yanasik yazar.

Colspec
Sütunlarin ebadini ayarlar. Sütunlar soldan saga, bir büyük harf ve onu izleyen bir sayi ile listelenirler (örnegin <COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttigi yazilari L harfi sola, R harfi saga alir. C harfi ortalamak için kullanilir. Burada belirteç opsiyonlari mutlaka büyük harfle yazilir.

Border
Bu belirteç, tablo kenarlarinin ebadini kontrol etmeye yarar. <table border=10>

Nowrap
Programin tablo içinde paragraflari otomatik olarak kesmemesi için kullanilir.Böylece kullanici istedigi yerde <br> belirtecini kullanabilir.

Sizlere tablo örneklerini vermem gerekirse kısaca aşağıda belirttiğim gibi verebilirim ve elbette bunları sizler kendinize göre uygulamalar yaparak düzelte bilirsiniz.

Temel bir FMTR Yöneticilerine has bir tablo

HTML-Kodu:
<table border> <tr> <td><center>Erre</center></td> <td>aSii_GenC</td> <td><center>Ares</center></td> </tr> <tr> <td>Volkan</td> <td><center>TnT</center></td> <td>Numberone</td> </tr></table>
Yukarıda sizlere örnek olarak verdiğim html kod satırlarını kullandığımız zaman bakalım ekranımıza nasıl bir görüntü gelecek bu görüntüleri sizlerle beraber bir bakalım aşağıda görüntünün önizleme resmi bulunmaktadır.

http://www.fmtr.net/attachment.php?a...d=11666441 61

Rowspan kullanarak tablo oluşturalım

HTML-Kodu:
<table border> <tr> <td>1. hücre Erre</td> <td rowspan=2>2. hücre aSii_GenC</td> <td>3. Ares</td> </tr> <tr> <td>4. hücre Volkan</td> <td>5. hücre TnT</td> </tr></table>
Rowspan kullanarak yukarıda belirtmiş olduğum html kod satırlarından yararlanarak oluşturmuş bulunuyorum ve gelin bunu biz ekranımızda nasıl görüneceğini görelim ekranda çıkacak olan görüntü aşağıda önizleme mevcut.

http://www.fmtr.net/attachment.php?a...d=11666445 80

Yukarıda vermiş olduğum örneklemelere devam edersem aşağıda belirttiğim html kod satırlarından faydalana bilirim gelin bunu yukarıda sizlere örnek olarak verdiğim Rowspan kullanarak oluşturduğumuz tablomuzu değiştirelim.

HTML-Kodu:
<table border> <tr> <td rowspan=2>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td> <td>4. hücre</td> </tr> <tr> <td>5. hücre</td> <td>6. hücre</td> <td>7. hücre </td> </tr></table>
Yukarıda vermiş olduğum html kod satırlarından bakalım ekranımıza ne gibi görüntü çıkacak bunu sizlerle beraber görelim ve tablo yapımımız devam edecektir.

http://www.fmtr.net/attachment.php?a...d=11666449 00

Colspan kullanarak bir kaç tablo yapalım boş durmak zararımıza.

HTML-Kodu:
<table border> <tr> <td>1. hücre</td> <td colspan=2>2. hücre</td> </tr> <tr> <td>3. hücre</td> <td>Item 4</td> <td>5. hücre</td> </tr></table>
Yukarıda belirttiğim html kod satırlarından yararlanarak yaptığımız tablomuzu penceremizde ne gibi bir görüntü ile karşılaşacağımızı aşağıda önizleme olarak belirttiğim gibi karşımıza görüntü çıkacaktır.