Open In App

Set cellpadding and cellspacing in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

Cell Padding

The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value.

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>cell padding</title>
    <style>
        table, th, td {
            border: 2px solid green;
            text-align:center;
        }
        th, td {
            padding: 20px;
            background-color:none;
        }
         
        h1 {
        color:green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Cell Padding property</h2>
        <h3>padding: 20px;</h3>
        <table style="width:70%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Harsh</td>
                <td>Agarwal</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Manas</td>
                <td>Chhabra</td>
                <td>27</td>
            </tr>
            <tr>
                <td>Ramesh</td>
                <td>Chandra</td>
                <td>28</td>
            </tr>
        </table>
    </center>
</body>
 
</html>


Output:

Cell Spacing

The cell spacing is used to define the space between the cells.

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>cell spacing property</title>
    <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 = "30px"</h3>
        <table style="width:70%;"
               cellspacing="30px">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Harsh</td>
                <td>Agarwal</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Manas</td>
                <td>Chhabra</td>
                <td>27</td>
            </tr>
            <tr>
                <td>Manas</td>
                <td>Chhabra</td>
                <td>27</td>
            </tr>
            <tr>
                <td>Ramesh</td>
                <td>Chandra</td>
                <td>28</td>
            </tr>
        </table>
    </center>
</body>
 
</html>


Output:

Supported Browsers:

  • Apple Safari
  • Google Chrome
  • Firefox
  • Opera


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads