What are Cell Padding & Cell Spacing in HTML Table ?

Last Updated : 10 Feb, 2022

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:

HTML Table Padding and Spacing

gottumukkala_sivanagulu

Improve

Article Tags :

What are Cell Padding & Cell Spacing in HTML Table ?

Similar Reads

Thank You!

What kind of Experience do you want to share?