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:
Last Updated :
10 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...