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
| 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 |