Tablolar Tablolar 101 <table>...</table> Tablolar, sayfalar satrlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedi÷imiz yerde durmasn sa÷lamak amaçlaryla kullanabilece÷imiz HTML'nin en önemli yaptalarndandr. Sayfada gözüksün ya da gözükmesin tablolar bir iskelet gibi kullanabilir, böylece u ana kadar ö÷rendiklerinizle yapamayaca÷nz gerçek düzenlemeyi yapabilirsiniz. Frat Üniversitesi Enformatik Bölümü Tablolar 102 Frat Üniversitesi Enformatik Bölümü Tablolar 103 Tablolar satr ve sütunlardan oluur. Tabloya genel bir balk atayabiliriz (thead). Her sütun için de kendi bal÷n oluturmak mümkündür. Tablonun sona erdi÷i satrdan sonraki satra açklama koyabiliriz (caption). Ayrca tablo hücrelerini yanndaki veya altndaki hücrelerle birletirebiliriz: Frat Üniversitesi Enformatik Bölümü Tablolar 104 imdi basit bir tablo yapmak için gerekli etiketleri ö÷renelim. Öncelikle <table>...</table> etiketlerini yazyoruz ve arasn doldurmaya balyoruz. <tr> etiketi ile satrlar , <td> etiketi ile de sütunlar oluturuyoruz. Frat Üniversitesi Enformatik Bölümü Tablolar 105 Frat Üniversitesi Enformatik Bölümü Tabloda balk ve gövde 106 Tablolar da HTML sayfasnda oldu÷u gibi balk (head) ve gövde (body) bölümlerine ayrlabilir. Tabloda bal÷ <thead> gövdeyi <tbody> etiketleri arasna yazarz. <caption> etiketi ile ikinci bir açklama vermek mümkündür. Sütun balklarna gelince, her bir balk <th> etiketi ile belirtilir ve bunlar <td> etiketinde oldu÷u gibi <tr>...</tr> arasna yazlr. Tabloda satr ve sütunlar belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasna alnr. Frat Üniversitesi Enformatik Bölümü Tablolar 107 Frat Üniversitesi Enformatik Bölümü Parametreler 108 <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> border parametresi çerçevenin kalnl÷n belirtir. border=0 çerçevenin görünmemesini sa÷lar. Frat Üniversitesi Enformatik Bölümü Parametreler 109 cellpadding parametresi hücre içi marj de÷erini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitiik olmasn sa÷lar. Frat Üniversitesi Enformatik Bölümü Parametreler 110 cellspacing parametresi hücreler aras marj belirler. Frat Üniversitesi Enformatik Bölümü Parametreler 111 align parametresi tabloyu hizalamada kullanlr . align=left sola, align=right sa÷a dayal yapar, align=center ortalar . Frat Üniversitesi Enformatik Bölümü Parametreler 112 width ve height parametreleri resimler konusunda gördü÷ümüz gibi tabloda en ve boy uzunlu÷unu belirtir. Tablonun de÷er verilmedi÷inde sahip oldu÷u normal ölçülerinden küçük de÷erler verilirse bu de÷erler dikkate alnmaz, bir baka deyile tabloyu büyütebiliriz fakat küçültemeyiz. Frat Üniversitesi Enformatik Bölümü Parametreler 113 Frat Üniversitesi Enformatik Bölümü <td> etiketi için parametreler 114 <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanlr. Frat Üniversitesi Enformatik Bölümü <td> etiketi için parametreler 115 background parametresi ile hücreye grafik-artalan yerletirebiliriz. Frat Üniversitesi Enformatik Bölümü <td> etiketi için parametreler 116 width ve height parametreleri ile hücrenin boyutlarn belirleyebiliriz. Yalnz height komutu ile tek sütunlu bir tabloda her hücrenin yüksekli÷ini de÷itirebilirken, width komutu ile her hücreyi de÷itiremeyiz. En büyük width de÷eri tüm sütun için geçerli olacaktr. Ayn ekilde tek satrl tabloda width de÷erini her hücre için de÷itirebilirken en büyük height de÷eri tüm satr için geçerli olacaktr. Frat Üniversitesi Enformatik Bölümü <td> etiketi için parametreler 117 Frat Üniversitesi Enformatik Bölümü <td> etiketi için parametreler 118 Frat Üniversitesi Enformatik Bölümü <td> etiketi için parametreler 119 align parametresi hücre içinde yatay hizalama yapar. Frat Üniversitesi Enformatik Bölümü <td> etiketi için parametreler 120 valign parametresi hücre içinde düey hizalama yapar. Frat Üniversitesi Enformatik Bölümü Hücreleri Birletirme 121 <td colspan=".." rowspan=".."> Ayn satrdaki hücreleri birletirmek için colspan, Ayn sütundaki hücreleri birletirmek için de rowspan parametresini kullanyoruz. Aa÷daki gibi bir tablo yapmz olsun : Frat Üniversitesi Enformatik Bölümü Hücreleri Birletirme 122 A ve B hücrelerini birletirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>B</td> etiketini siliyoruz. E F ve G hücrelerini birletirmek için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>F</td> , <td>G</td> etiketlerini siliyoruz. Frat Üniversitesi Enformatik Bölümü Hücreleri Birletirme 123 Ayn ekilde E ve I hücrelerini birletirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini birletirmek için C hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td> etiketlerini siliyoruz. Frat Üniversitesi Enformatik Bölümü
© Copyright 2024 Paperzz
