Open In App

What are Cell Padding & Cell Spacing in HTML Table ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss the cellpadding and cellspacing properties in HTML. These properties are used with the table tag for defining the spacing and padding of a table.

Cellpadding: This property 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>

Example: In this example, we will use the cellpadding property of the table.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        table,
        th,
        td {
            border: 2px solid green;
            text-align: center;
        }
  
        th,
        td {
            padding: 12px;
            background-color: none;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Cell Padding property</h2>
        <h3>padding: 12px;</h3>
        <table style="width:70%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Sravan</td>
                <td>kumar</td>
                <td>22</td>
            </tr>
            <tr>
                <td>Harsha</td>
                <td>vardhan</td>
                <td>21</td>
            </tr>
        </table>
    </center>
</body>
  
</html>


Output:

Cellspacing: This property specifies the space between cells, that is, it defines the whitespace between the edges of the adjacent cells.

Syntax:

<table cellspacing="value" >.....</table>

Example: In this example, we will use the cellspacing property of the table.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        table,
        th,
        td {
            border: 2px solid green;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Cell Spacing property</h2>
        <h3>cellspacing = "20px"</h3>
        <table style="width:70%;" 
            cellspacing="20px">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>sravan</td>
                <td>kumar</td>
                <td>22</td>
            </tr>
            <tr>
                <td>harsha</td>
                <td>vardhan</td>
                <td>21</td>
            </tr>
        </table>
    </center>
</body>
  
</html>


Output:



Last Updated : 10 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads