Skip to content
Related Articles

Related Articles

Improve Article

Difference between Cellpadding and Cellspacing

  • Last Updated : 31 Jul, 2020
Geek Week
  • 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 meanCellspacing is less effective than Cellpadding.
Cellpadding is an attributeCellspacing is also an attribute.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :