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: