Categories: Style DOM

Style.Borderspacing

Properti style.borderSpacing dipakai untuk tetapkan 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:

style.borderSpacing = "0"
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

style.borderSpacing = "20px"
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

style.borderSpacing = "20px 5px"
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

style.borderSpacing = "5px 20px"
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 memiliki dampak kalau properti style.borderCollapse atau BORDER-COLLAPSE di set ke nilai collapse.

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code