Cách đặt khoảng cách giữa các ô bảng (borderSpacing) bằng JavaScript

Thuộc tính borderSpacing đặt khoảng cách giữa các viền của các ô liền kề trong bảng. Chỉ có hiệu lực khi borderCollapse là separate (mặc định).

Ví dụ minh họa

Mã sau đặt khoảng cách giữa các ô thành 15px khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <table id="newTable" border="2">
    <tr><th>EmpID</th><th>EmpName</th><th>EmpDept</th></tr>
    <tr><td>001</td><td>Amit</td><td>IT</td></tr>
    <tr><td>002</td><td>John</td><td>Finance</td></tr>
    <tr><td>003</td><td>David</td><td>Marketing</td></tr>
  </table>
  <br>
  <button onclick="setSpacing()">Đặt khoảng cách giữa ô = 15px</button>
  <script>
    function setSpacing() {
      document.getElementById("newTable").style.borderSpacing = "15px";
      /* Hoặc: "15px 10px" -> ngang 15px, dọc 10px */
    }
  </script>
</body>
</html>

Cú pháp

• borderSpacing = "length" — cùng giá trị cho ngang và dọc.
• borderSpacing = "horizontal vertical" — giá trị riêng cho ngang (left/right) và dọc (top/bottom).
• Đơn vị: px, em, rem, %... Không chấp nhận giá trị âm.

Lưu ý

• Nếu bảng có border-collapse: collapse, borderSpacing bị bỏ qua hoàn toàn.
• Thuộc tính này chỉ set trên <table>, không áp dụng cho <td> hay <th>.
• Mặc định của trình duyệt thường là 2px (tùy UA stylesheet).