Horje
What are Cell Padding & Cell Spacing in HTML Table ?

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:


 


Reffered: https://www.geeksforgeeks.org

HTML

Related
What is the significance of adding autocomplete attribute in HTML Form ? What is the significance of adding autocomplete attribute in HTML Form ?
HTML DOM Textarea type Property HTML DOM Textarea type Property
HTML nonce Attribute HTML nonce Attribute
HTML itemscope Attribute HTML itemscope Attribute
Which tag is used to display additional information when we click to open or close on demand in HTML ? Which tag is used to display additional information when we click to open or close on demand in HTML ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje