Open In App

Difference between Cellpadding and Cellspacing

Improve
Improve
Like Article
Like
Save
Share
Report
  • Cellpadding:

    Cellpadding specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the content of the cell.

    Syntax:

    <table cellpadding="value" >.....</table>
    where, value determines the padding 
    (space between the border of a table and its content)
  • Cellspacing:

    Cellspacing specifies the space between cells (i.e) it defines the whitespace between the edges of the adjacent cells.

    Syntax:

    <table cellspacing="value" >.....</table>
    where, value determines the padding 
    (space between adjacent cells)

Example:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
          text-decoration-style: solid;
          width: 25px;
          font-size: x-large;
          color: blueviolet;
        }
      </style>
</head>
<body>
<table border="1" 
       cellpadding="4"
       cellspacing="5">
  <thead>
  <td><span>Name</span></td>
  <td><span>Age</span></td>
  </thead>
  <tbody>
  <tr>
    <td>Rani</td>
    <td>30</td>
  </tr>
   <tr>
    <td>Rajan</td>
    <td>35</td>
  </tr>
  <tr>
    <td>Akshaya</td>
    <td>17</td>
  </tr>
  <tr>
    <td>Ashick</td>
    <td>13</td>
  </tr>
  </tbody>
</table>
</body>
</html>


Output:

Difference between cellpadding and cellspacing:

Cellpadding

Cellspacing

It specifies the space between the border of a table cell and its contents. It specifies the space between adjacent cells.
It is created by using HTML <table> tag but type attribute is set to cellpadding. It is also created by using HTML <table> tag but type attribute is set to cellspacing.
It is mainly meant for a single cell. Cellspacing can get subjected to more than one cell.
The default cellpadding value is 1  Whereas, the default cellspacing value is 2
Cellpadding is widely used and considered to be an effective mean Cellspacing is less effective than Cellpadding.
Cellpadding is an attribute Cellspacing is also an attribute.


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