Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use JavaScript DOM to change the padding of a table?
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 the relational data on the user screen. We can easily show the 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 a suitable width, height, margin, padding and the text it contains must not get 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.
Let us discuss how we can change the padding of a table with the help of JavaScript DOM object.
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.
Let us discuss both the above properties in details with help of examples −
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
Following is the syntax that is followed to change the padding of the table with the help of JavaScript DOM −
var tagetTable = document.getElementById(ID); targetTable.style.padding = "";
Let us understand it with help of a code example, where the padding property will be in action.
Algorithm
Step 1 − In the first step, we will define a table with some data inside an HTML document whose padding we will change later.
Step 2 − In this step, we will define a JavaScript call-back function that will be called when the user clicks the button.
Step 3 − In the last step, we will add the functionality to change the padding inside the JavaScript function using the padding property by following the above syntax.
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" id="newtable">
<tr>
<td> One </td>
<td> Two </td>
</tr>
<tr>
<td> Three </td>
<td> Four </td>
</tr>
<tr>
<td> Five </td>
<td> Six </td>
</tr>
</table>
<p id="result"></p>
<input type="button" onclick="paddingFunc()" value="Change Table Padding">
<script>
var table = document.getElementById("newtable");
var result = document.getElementById("result");
function paddingFunc() {
table.style.padding = "20px 10px";
result.innerHTML = "<b> We are giving the following padding to the table: <br>" + 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 cell padding property of JavaScript DOM object or 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 wall. It accepts a number as its value in the form of string and assign a space between the cell content and the cell walls in the pixels.
Syntax
Following syntax can be used to change the padding of the table cell using the cellpadding property −
var targetTable = document.getElementById(Id); targetTable.cellPadding = "number";
Let us understand the practical implementation of the cellPadding property to change the cell padding of a table.
Algorithm
The algorithm of this example is almost similar to the algorithm of the above example. To change the padding of a cell in the table you just need to replace the style.padding property in the previous example with the cellPadding property, as shown in the example below.
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 padding of a table </h2>
<table style="border:2px solid black" id="newtable">
<tr>
<td> One </td>
<td> Two </td>
</tr>
<tr>
<td> Three </td>
<td> Four </td>
</tr>
<tr>
<td> Five </td>
<td> Six </td>
</tr>
</table>
<p id="result"></p>
<input type="button" onclick="paddingFunc()" value="Change Table Padding">
<script>
var table = document.getElementById("newtable");
var result = document.getElementById("result");
function paddingFunc() {
table.cellPadding = "10";
result.innerHTML = "<b> We are giving the following padding to the table: <br>" + 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, the value by which the padding is changing will also be visible to user once the button is clicked.
In this tutorial, we have learnt the two different ways by which we can change the padding of a table or its cells with the JavaScript DOM, using these methods we not only can set the values but we also can get the previous values or the values given by us at the time of changing the padding.
697 Views
