borderSpacing

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

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

yatay	Yatay kenarlık boşluğunu belirler.
dikey	Dikey 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