Thuộc tính borderSpacing trong HTML DOM Style

Thuộc tính borderSpacing dùng để thiết lập hoặc lấy khoảng cách giữa các ô (cell) trong bảng (table). Chỉ áp dụng khi border-collapse: separate (mặc định).

Cú pháp

object.style.borderSpacing = "length length|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
length length	Khoảng cách giữa ô. 1 giá trị: áp dụng cả ngang và dọc. 2 giá trị: giá trị 1 = ngang, giá trị 2 = dọc. Mặc định: 0
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  div { display: flex; float: left; }
  table { border: 3px solid black; }
  td { border: 3px solid lightgreen; }
  th { border: 3px solid lightblue; }
</style>
<script>
  function IncreaseBorderSpacing() {
    document.getElementById("t1").style.borderSpacing = "10px 10px";
    document.getElementById("Sample").innerHTML = "Khoảng cách viền bảng đã được tăng";
  }
</script>
</head>
<body>
<table id="t1">
  <tr><th>TRÁI CÂY</th><th>GIÁ</th></tr>
  <tr><td>XOÀI</td><td>40</td></tr>
  <tr><td>TÁO</td><td>50</td></tr>
</table>
<p>Tăng khoảng cách viền bảng trên bằng cách nhấn nút dưới đây</p>
<button onclick="IncreaseBorderSpacing()">Tăng Border Spacing</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Bảng ban đầu các ô liền nhau. Sau khi nhấn "Tăng Border Spacing", khoảng cách ngang và dọc giữa các ô trở thành 10px.