Open In App

HTML DOM Table cellPadding Property

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML DOM Table cellPadding property is used to set or return the value of the cellpadding attribute of the <table> element . The cellPadding attribute is used to define the space between the cell content and cell wall. 

Syntax:

  • It is used to return the table cellPadding property.
    TableObject.cellPadding
  • It is used to set the table cellPadding property.
    TableObject.cellPadding = "number"

Property values : It contains a numeric value that represents the space between the cell wall and cell content in terms of pixels. 

Note: This property is not supported by HTML5.

Example 1: Below HTML code shows, how to return the table cellPadding property. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Table cellPadding property in HTML
    </title>
      
    <style>
        table,
        td {
            border: 1px solid green;
        }
  
        h1 {
            color: green;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Table cellPadding Property</h2>
  
    <table id="tableID" align="center"
        cellpadding="35">
          
        <thead>
            <tr>
                <th>Subject</th>
                <th>Courses</th>
            </tr>
        </thead>
        <tr>
            <td>Java</td>
            <td>Fork Java</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>Fork Python</td>
        </tr>
        <tr>
            <td>Placements</td>
            <td>Sudo Placement</td>
        </tr>
    </table>
    <br>
  
    <button ondblclick="doubleClick()">
        Return cellPadding
    </button>
      
    <p id="paraID"></p>
      
    <script>
        function doubleClick() {
            var w = document.getElementById(
                "tableID").cellPadding;
  
            document.getElementById(
                "paraID").innerHTML = w + "px";
        }
    </script>
</body>
  
</html>


Output:

Example 2: Below HTML code illustrates how to set the table cellPadding property. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Table cellPadding Property in HTML
    </title>
      
    <style>
        table,
        td {
            border: 1px solid green;
        }
  
        h1 {
            color: green;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Table cellPadding property</h2>
  
    <table id="tableID" align="center" 
        cellpadding="35">
      
        <thead>
            <tr>
                <th>Subject</th>
                <th>Courses</th>
            </tr>
        </thead>
        <tr>
            <td>Java</td>
            <td>Fork Java</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>Fork Python</td>
        </tr>
        <tr>
            <td>Placements</td>
            <td>Sudo Placement</td>
        </tr>
    </table>
    <br>
  
    <button ondblclick="doubleClick()">
        Return cellPadding
    </button>
      
    <p id="paraID"></p>
      
    <script>
        function doubleClick() {
            var w = document.getElementById(
                "tableID").cellPadding = "15";
  
            document.getElementById(
                "paraID").innerHTML = w + "px";
        }
    </script>
</body>
  
</html>


Output:

Supported Browsers:

  • Google Chrome
  • Firefox
  • Opera
  • Apple Safari
  • Internet Explorer


Last Updated : 31 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads