Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

What are Cell Padding & Cell Spacing in HTML Table ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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:


My Personal Notes arrow_drop_up
Last Updated : 10 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials