Open In App

Difference between Cellpadding and Cellspacing

Last Updated : 31 Jul, 2020
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.


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads