myNotlar Logo

borderSpacing


Internet Explorer 8 Firefox 1 Opera 6

borderSpacing özelliği, table ve inline-table elementlerinde yatay ve dikey hücre kenarlık boşluklarının belirlenmesini sağlar. Bu özellik sadece border-collapse özelliğinin değeri "separate" olarak belirtildiği zaman kullanılabilir.

DOM Sözdizimi

element.style.borderSpacing = "ara"
element.style.borderSpacing = "yatay dikey"

CSS Sözdizimi

border-spacing: ara
border-spacing: yatay dikey
araCSS uzunluk ölçü birimlerinden biriyle yatay ve dikey kenarlık boşluğunu belirler. (em, ex, px, in, cm, mm, pt veya pc)

yatayYatay kenarlık boşluğunu belirler.
dikeyDikey kenarlık boşluğunu belirler.

İlk Değer 0
Uygulama table ve inline-table elementleri

Aşağıdaki örnek, border-spacing özelliğinin yatay ve dikey mesafe farklılıklarını gösterecek şekilde birkaç farklı değer atamasıyla kullanımını göstermektedir.

<style type="text/css">
#ornekTablo1, #ornekTablo2, #ornekTablo3 {
    border-collapse: separate;
    border: solid 1px red;
}
#ornekTablo1 td, 
#ornekTablo2 td, 
#ornekTablo3 td {
    border: solid 1px #E04040;
}
#ornekTablo1 {    
    border-spacing: 5px;    
}
#ornekTablo2 {    
    border-spacing: 15px 5px;    
}
#ornekTablo3 {    
    border-spacing: 5px 15px;    
}
</style>

border-spacing: <b>5px;</b>
<table id="ornekTablo1" border="1"><tr>
    <td>Hücre - 1</td>
    <td>Hücre - 2</td>
    <td>Hücre - 3</td>
</tr></table>
<br/>

border-spacing: <b>15px 5px;</b>
<table id="ornekTablo2" border="1"><tr>
    <td>Hücre - 1</td>
    <td>Hücre - 2</td>
    <td>Hücre - 3</td>
</tr></table>
<br/>

border-spacing: <b>5px 15px;</b>
<table id="ornekTablo3" border="1"><tr>
    <td>Hücre - 1</td>
    <td>Hücre - 2</td>
    <td>Hücre - 3</td>
</tr></table>
Canlı Sonuç
border-spacing: 5px;
Hücre - 1 Hücre - 2 Hücre - 3

border-spacing: 15px 5px;
Hücre - 1 Hücre - 2 Hücre - 3

border-spacing: 5px 15px;
Hücre - 1 Hücre - 2 Hücre - 3
İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |