Open In App

Difference between Cellpadding and Cellspacing

Last Updated : 31 Jul, 2020
Comments
Improve
Suggest changes
10 Likes
Like
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:

html 
<!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 meanCellspacing is less effective than Cellpadding.
Cellpadding is an attributeCellspacing is also an attribute.

A

akshara_a
Improve
Article Tags :

Explore

Lightbox