Bu dersimizde Dreamweaver ile kesikli çizgi şeklinde nasıl tablo kenarı oluşturacağımızı öğrenicez ve diğer alternatiflerede göz atacağız.bir tablo oluştura

İlk olarak CTRL+ALT+T kısayolu ile genişliği 500px olan ve 3 satır ve 3 sutundan oluşan bir tablo oluşturalım.tablomuzu seçtikten sonra aşağıdaki properties bölümünden cellpad, cellspace ve border değerlerini sıfır olarak girelim.
Bu kısımların ne işe yaradığını bilmiyorsanız dreamveaverda tablo oluşturma ve tablo özellikleri adlı makalemize bir göz atın.

Şimdi tablomuzu seçelim ve split tuşuna basalım.Bu bölüm bize hem tasarımımızı hemde kodları gösteren bir arayüz sağlıyor.

Çalışmamızın kod kısmında aşağıdaki kodların seçili olduğunu göreceksiniz.

<table width="500" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

tablo özelliklerimizin olduğu kısım

<table width="500" border="0" cellpadding="0" cellspacing="0">

Şimdi tablomuzun kenarlarına nasıl kesikli çizgi oluşturacağımıza gelelim.

yukarıdaki kod kımında bulunan border=”0″ kodunu silip yerine aÅŸağıdaki kodu yazalım.

style="border:1px dashed #FF0000" >

Bu kod ile tablomuza 1px boyutunda , renk kodu #FF0000 olan ve stili dashed(kesikli çizgi) olan bir border vermeiş olduk.

Peki tablomuzun sadece alt tarafına border uygulamak istersek ne yapacağız ?

style="border:1px dashed #FF0000" >

Bu kısımda border yazdığımız yere border-bottom yazmak yeterli olacaktır.Border seçeneğini seçtiğimiz adımdaborder-bottom,border-left,border-rigt ve border-top gibi seçenekler yer almaktadır.Bunlardan birini seçerek istediğimiz tarafına border uygulayabiliriz.

Peki aynı anda sadece sağ ve sol tarafına nasıl border uygulayacağız.

Bunun için aşağıdaki kodu kullanıcaz.

style="border-right:1px dashed #CC3333 ; border-left:1px dashed  #CC3333" >

kodda gördüğünüz gibi noktalı virgül ile ayırarak üçünçü bir tarafa yeni bir border ekleyebiliriz.

Tabloya nasıl border stilleri uygulayacağımızı gördük şimdi de istediğimiz herhangi bir hücreye nasıl border ekleyeceğimiz görelim.

Oluşturduğumuz tablonun herhangi bir hücresinin içine çift tıklayarak seçili hale getirelim ve split sekmesine tıklayalım.

<td>&nbsp;</td>

Seçtiğim hücrenin içi boş olduğu için yukarıdaki kod seçili olacaktır.

yukarıda
table tagları arasına yazdığımız kodları bu sefer

td tagları arasına yazıyoruz.

<td style="border:1px dashed #CC3333">&nbsp;</td>

Ben sadece dashed stilini tanıttım diğer stilleri deneyerek nasıl bir görüntü verdiğini görebilirsiniz.

dotted border Stili – Noktalı Çizgi

dashed border Stili – Kesik Çizgi

solid border Stili – Düz Çizgi

double border Stili – Çift Düz Çizgi

groove border Stili – İçe Kabarık Çizgi

ridge border Stili – Dışa Kabarık Çizgi

inset border Stili – İçe Gömülü Çizgi

outset border Stili – Dışa Gömülü Çizgi