Cách dùng JavaScript DOM thay đổi padding của bảng (table)

Để thay đổi padding (khoảng đệm bên trong) của một bảng, bạn gán giá trị cho thuộc tính padding** trên style của phần tử <table>. Lưu ý: padding trên <table> chỉ tác dụng nếu bảng có border-collapse: separate (mặc định) và thường dùng kết hợp với border-spacing.

Ví dụ minh họa

Mã sau đặt padding 20px cho bảng khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeTablePadding(tableId) {
      document.getElementById(tableId).style.padding = "20px";
    }
  </script>
</head>
<body>
  <table style="border:2px dashed black" id="newtable">
    <tr><td>Một</td><td>Hai</td></tr>
    <tr><td>Ba</td><td>Bốn</td></tr>
    <tr><td>Năm</td><td>Sáu</td></tr>
  </table>
  <p>
    <input type="button" onclick="changeTablePadding('newtable')" value="Thay đổi Padding bảng">
  </p>
</body>
</html>

Lưu ý quan trọng

• Padding trên <table>: Tạo khoảng trống giữa viền bảng và các ô (td/th) — chỉ thấy rõ khi border-collapse: separate.
• Padding trên <td>/<th>: Thường dùng hơn để tạo khoảng đệm cho nội dung trong ô. Ví dụ: document.querySelectorAll('td, th').forEach(c => c.style.padding = '10px');
• border-collapse: collapse sẽ bỏ qua padding trên <table> và border-spacing.

Cách đặt padding cho từng ô (td/th) bằng JS

function setCellPadding(tableId, paddingValue) {
  const table = document.getElementById(tableId);
  const cells = table.querySelectorAll("td, th");
  cells.forEach(cell => cell.style.padding = paddingValue);
}
// Gọi: setCellPadding('newtable', '12px 8px');