Properti style.borderSpacing digunakan untuk menetapkan whitespace antar cell di dalam elemen TABLE.
Sintaks:
obj.style.borderSpacing = value;
Nilainya:
0(default)- "Length Length" (misal: "10px 20px")
inherit
Untuk jelasnya silahkan lihat ilustrasi di bawah ini:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
Contoh:
<HTML>
<HEAD>
<TITLE>style.borderSpacing</TITLE>
<STYLE TYPE="text/css">
#mytable
{
border: black solid 1px;
border-collapse: separate;
border-spacing: 0;
}
</STYLE>
<SCRIPT TYPE="text/javascript">
function setSpace()
{
var list = document.forms[0].listVal;
document.getElementById("mytable").style.borderSpacing = list.options[list.selectedIndex].text;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE ID="mytable" BORDER="1">
<TR>
<TD>row 1, cell 1</TD>
<TD>row 1, cell 2</TD>
</TR>
<TR>
<TD>row 2, cell 1</TD>
<TD>row 2, cell 2</TD>
</TR>
</TABLE>
<FORM>
<SELECT NAME="listVal" onChange="setSpace()">
<OPTION SELECTED>0
<OPTION>10px
<OPTION>20px 10px
<OPTION>30px 20px
<OPTION>40px 30px
<OPTION>50px 40px
<OPTION>60px 50px
<OPTION>70px 60px
<OPTION>80px 70px
<OPTION>90px 80px
<OPTION>100px 90px
<OPTION>200px 180px
<OPTION>300px 280px
</SELECT>
</FORM>
</BODY>
</HTML>
Catatan: Properti style.borderSpacing tidak akan mempunyai efek jika properti style.borderCollapse atau BORDER-COLLAPSE di set ke nilai collapse.
