Article Categories

Selected Reading

How to use JavaScript DOM to change the padding of a table?

Javascript Web Development Front End Technology

In this tutorial, we learn to use JavaScript DOM to change the padding of a table. To change the padding of a table, use the DOM padding property.

The HTML table is used to display relational data on the user screen. We can easily show related or dependent data to the user and user can easily understand and determine the characteristics of the data with help of table. But, while we are showing the relational data to the user in the form of table, we need to make sure that the table is well structured and looking good according to the data like the table must have suitable width, height, margin, padding and the text it contains must not overflow out of the table.

Generally, we achieve all these tasks with the help of Cascading Style Sheet or CSS. But we can also use the JavaScript DOM object to change the padding or any other style of the table.

There are two methods of using the JavaScript DOM to change the padding of the table, as listed below ?

Using the Style padding property.
Using the cellPadding property of table.

Using the Style padding Property

In JavaScript, we can use the padding property of the style object while changing the padding of the table with JavaScript DOM. The padding property takes the values in the form of string and behaves similarly as is used in CSS even if the padding is provided to the chosen sides of the table. It accepts the values with the percentage, pixel, viewport width, view height and other length units.

Syntax

var targetTable = document.getElementById(ID);
targetTable.style.padding = "value";

Example

Below code example will illustrate the use of the padding property of the style object to change the padding of the table ?

<html>
<body>
   <h2>Using JavaScript DOM to change the padding of a table</h2>
   <table style="border:2px solid black; border-collapse: collapse;" id="newtable">
      <tr>
         <td style="border:1px solid black;"> One </td>
         <td style="border:1px solid black;"> Two </td>
      </tr>
      <tr>
         <td style="border:1px solid black;"> Three </td>
         <td style="border:1px solid black;"> Four </td>
      </tr>
      <tr>
         <td style="border:1px solid black;"> Five </td>
         <td style="border:1px solid black;"> Six </td>
      </tr>
   </table>
   <br><br>
   <button onclick="paddingFunc()">Change Table Padding</button>
   <p id="result"></p>
   
   <script>
      var table = document.getElementById("newtable");
      var result = document.getElementById("result");
      
      function paddingFunc() {
         table.style.padding = "20px 10px";
         result.innerHTML = "<b>Table padding changed to: " + table.style.padding + "</b>";
      }
   </script>
</body>
</html>

In the above example, we have changed the padding of the table using the padding property of style object of JavaScript DOM. The padding that we changed using the property is also visible to the user.

Using the cellPadding Property

The cellPadding property of JavaScript DOM object is used to set or return the cellpadding attribute value of the table element of HTML. This attribute sets the space between the content of a particular cell and its walls. It accepts a number as its value in the form of string and assigns space between the cell content and the cell walls in pixels.

Syntax

var targetTable = document.getElementById(ID);
targetTable.cellPadding = "number";

Example

This example explains the use of the cellPadding property with the JavaScript DOM object to change the cell padding of a table ?

<!DOCTYPE html>
<html>
<body>
   <h2>Using JavaScript DOM to change the cell padding of a table</h2>
   <table style="border:2px solid black; border-collapse: collapse;" id="newtable">
      <tr>
         <td style="border:1px solid black;"> One </td>
         <td style="border:1px solid black;"> Two </td>
      </tr>
      <tr>
         <td style="border:1px solid black;"> Three </td>
         <td style="border:1px solid black;"> Four </td>
      </tr>
      <tr>
         <td style="border:1px solid black;"> Five </td>
         <td style="border:1px solid black;"> Six </td>
      </tr>
   </table>
   <br><br>
   <button onclick="paddingFunc()">Change Cell Padding</button>
   <p id="result"></p>
   
   <script>
      var table = document.getElementById("newtable");
      var result = document.getElementById("result");
      
      function paddingFunc() {
         table.cellPadding = "15";
         result.innerHTML = "<b>Cell padding changed to: " + table.cellPadding + "px</b>";
      }
   </script>
</body>
</html>

In the above example, we have changed the cell padding of a table using the cellPadding property with JavaScript DOM. The action will be performed by clicking the button, and the value by which the padding is changing will also be visible to user once the button is clicked.

Comparison

Method	Target	Value Format	Use Case
`style.padding`	Entire table	CSS units (px, %, em)	External spacing around table
`cellPadding`	Individual cells	Numeric string (pixels)	Internal spacing within cells

Conclusion

JavaScript DOM provides two effective methods to change table padding: style.padding for the entire table and cellPadding for individual cell spacing. Choose based on whether you need external table spacing or internal cell padding.

Abhishek

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next