Bu dersimizde sizlere asp ile tablo, sütun, blok oluşturmayı öğreteceğim. Bunlar ilerde sizlerin çok kullanacağı temel bilgilerdendir. Eğer bunları öğrenmez veya tam öğrenemezseniz asp kullanmayı bilseniz bile bunu sayfaya yansıtamaz ve görsellik/ tasarım adına hiçbirşeyi yapamazsınız.
Tablo nedir ? Tablo web sitenizi oluşturmak için ana hatları ile arayüzü belirlemeye yarar. Tablo oluşturmadan ne sütun ne de blok oluşturabilirsiniz. Önce basit bir tablo oluşturalım.
Örnek :
<table border="1" height="100" width="100">
<tr>
<td>Örnek bir tablo, sütun ve blok</td>
</tr>
</table>
– Yukarda “border” tablonun çerçevesini, “height” uzunluğunu, “width” ise enini belirliyor. Bunları “<tr>” veya “<td>” yani blok ve sütun içinde girebilirsiniz. Yani sütunun ve blokun boyunu, enini örnek tablodaki gibi belirleyebilirsiniz. Örnek verecek olursak..
<table border="1" height="200" width="200">
<tr>
<td width="100">Örnek tablo, blok ve sütundur. Bu sütunun eni 100'dür</td>
<td width="100">Örnek tablo, blok ve sütundur. Bu sütunun eni 100'dür</td>
</tr>
</table>
– Burada 200 birimlik bir tablo ve içerisinde 1 blok, 2 sütun (100 birimlik, tablo 2 eş sütuna bölünmüş) göreceksiniz. Sütunlar blokla beraber kullanılır. Bir blokta hiç sütun kullanmayabilirsiniz. Yani “<td>” ve “</td>” kısımlarını çıkarabilir sadece bloka veri koydurabilirsiniz. Bu sadece bloku 1 parça olarak gösterecek ve herhangi bir bloku bölme/sütunlama yapmayacaktır.
– Sütunların enini ve boyunu değiştirdik. Blokların enini ve boyunu değiştirmemiz de mümkün. “height” ve “width”‘i kullanarak blokun görsel yönden ayarlarını yapmak mümkün. Örnek verecek olursak eğer :
<table border="1" height="200" width="200">
<tr width="100" height="100">
<td>Örnek tablo, blok ve sütundur. Bu blokun eni 100'dür</td>
</tr>
<tr width="100" height="100">
<td>Örnek tablo, blok ve sütundur. Bu blokun eni 100'dür</td>
</tr>
</table>
– Burada 2 adet blok oluşturduk. Bu blokların her biri 100 birim eninde ve 100 birim genişliğinde. Kodları *.html dosyası olarak kaydedip tarayıcınızla çalıştırdığınızda tablonun 2 bloktan oluştuğunu görebilirsiniz. Bu blokların içerisinde 1’er adet sütun var. Dilerseniz bunları 2’şer sütun veya istediğiniz kadar sütun şeklinde göstertebilirsiniz. Size 2’şer sütunlu olanını da göstereyim haydi
<table border="1" height="200" width="200">
<tr width="100" height="100">
<td width="50">Bu blokun eni 100'dür ve sütunlar 50 birimdir</td>
<td width="50">Bu blokun eni 100'dür ve sütunlar 50 birimdir</td>
</tr>
<tr width="100" height="100">
<td width="50">Bu blokun eni 100'dür ve sütunlar 50 birimdir</td>
<td width="50">Bu blokun eni 100'dür ve sütunlar 50 birimdir</td>
</tr>
</table>
– Şimdi tablo, blok ve sütun oluşturmayı öğrendiğimize göre sırada bunları görsel olarak iyileştirme yani süsleme/şekillendirme var. Bunları nasıl yapacağız sorularını şimdiden duyar gibiyim. Acele etmeyin geliyoruz yavaş yavaş. Önce tablonun arka plan rengini belirleyelim. Beyaz değilde kırmızı olsun. Örnek aşağıda hemen gözatalım
<table bgcolor="red" border="1" height="100" width="100">
<tr>
<td>Bu bir bgcolor örneğidir</td>
</tr>
</table>
– Yukarıda “height” ve “width”‘e ek olarak “bgcolor” özelliğini ekledik. Bu özellik sayesinde tablomuzun içerisine renk verebiliyoruz. Ben kırmızı rengini seçtim. Sizler ise daha farklı renkler deneyebilirsiniz. “red” yerine “blue”, “green” vb. yazabilirsiniz. Ama genel olarak daha fazla renk istiyorsanız, html’de renk kodlarından yararlanmalısınız. Örnek olarak “#FFFFFF” başına işareti gelecek şekilde renge ait kod numarasını giriyoruz. “FFFFFF” 6 haneli, bu beyaz renk kodudur öte yandan “#000000” ise siyah renk kodudur. Eğer dreamweaver gibi web tasarım programları kullanıyorsanız size ufak bir ekranda renkler ve üzerine geldiğiniz rengin kodu çıkacaktır. Rengi mouse ile tıkladığınız takdirde “bgcolor” kısmına renk kodunu otomatik olarak girecektir.
– Tablomuz değilde sütunumuz ya da blok’a renk vermek istiyorsan “bgcolor” özelliğini blok veya sütun için girmemiz gerekecek. Şimi size bir örnek yazalım
<table border="1" height="100" width="100">
<tr>
<td bgcolor="blue" width="50">Bu bir backcolor örneğidir</td>
<td bgcolor="green" width="50">Bu bir backcolor örneğidir</td>
</tr>
</table>
– Örnekteki 2 sütuna farklı renkler verdim. Baştakine mavi sondakine ise yeşil renk. Bu sütunları renklendirdi. “bgcolor” kullanarak bloklarınıza da renk verdirebilirsiniz.
– Bir başka komut/özellik ise “style”‘dir. “style” sayesinde css ayarları vermeniz mümkün. Tabii css işinizi kolaylaştırmak için var “style” hakkında hiçbirşeye değinmiyorum çünkü css’ye geçtiğimizde css komutlarını/özelliklerini “style”‘da kullanabileceksiniz.
– Öğrenmeniz gerek diğer bir özellik “bordercolor” özelliğidir. Bu özellik ile oluşturduğunuz tablonun “border” değeri 0’dan farklıysa, çerçeve yani border’in rengini belirlemek mümkün. “bordercolor” özelliği ile dilediğiniz renkte çerçeve oluşturabilirsiniz. Renk kodları html’de hep aynıdır değişmez, “#renkkodu” şeklinde kullanılır, bu daha doğrudur.
<table border="1" height="100" width="100" bordercolor="red">
<tr>
<td>Bu bir bordercolor örneğidir</td>
</tr>
</table>
– Tablomuzun “border” değeri 0’dan farklı 1’dir. Böylece çerçevenin rengini değiştirebileceğim. Ben kırmızı yaptım. Sizde deneyip kırmızı olduğunu görebilirsiniz. Farklı renkler kullanmanız mümkün.
– Tablomuza ek bir başka özellik olarak “align”‘i kullanabiliriz. Tablomuzun konumunu belirlememizde bize yardımcı olacaktır. Sağa yaslama, sola yaslama ve ortalama gibi biçimleri mevcut. Sağa yaslamak isterseniz “align=”Right””, sola yaslamak isterseniz “align=”Left”” ve ortalamak isterseniz “align=”Center”” yapmanız yeterli olacaktır. Örneğimizi inceleyelim
<table border="1" height="100" width="100" align="center">
<tr>
<td>Bu bir align örneğidir</td>
</tr>
</table>
– Yukardaki örnekte tablomuzun ortaladık. Peki sütunumuzu veya blokları ortalayamaz mıyız ? Tabii ki bunlarda mümkün. Sütunu ortalarsanız içindeki veriler ortalanacaktır, blok ortalandığında ise sütunlarda ortalanacağından bloktaki tüm veriler ortada hizalanacaktır. Örneğe bakalım
<table border="1" height="100" width="100">
<tr align="center">
<td>Bu bir align örneğidir</td>
</tr>
</table>
– Burda blok ortaladık ama eğer 2 sütun oluşturup birini ortalayıp diğerini ortalamadan aradaki farkı görmek isterseniz size bu örneğide gösterelim.
<table border="1" height="100" width="100">
<tr>
<td width="50" align="center">Bu bir align örneğidir</td>
<td width="50">Bu bir align örneğidir</td>
</tr>
</table>
– Örnekte ilk sütun ortalandı ve içindeki verilerde ortalandı ama ikinci sütunda ortalama yapmadığımızdan sola yaslanmış bir hal aldı. Şimdi her iki sütunuda ortalayalım.
<table border="1" height="100" width="100">
<tr>
<td width="50" align="center">Bu bir align örneğidir</td>
<td width="50" align="center">Bu bir align örneğidir</td>
</tr>
</table>
*Not: Unutmayınız, tablosuz blok ve bloksuz sütun olmaz!
– İşte bu kadar basit. 2 sütunda ortalandı. Ne kadar kolay değil mi ?
Şimdilik size aktarmam gerektiğini düşündüklerim bunlar. Diğer derslerde gene beraber asp yolunda ilerlemek üzere hoşçakalın.