Set cellpadding and cellspacing in CSS
Last Updated :
04 Aug, 2023
Cell Padding
The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value.
Example:
html
<!DOCTYPE html>
< html >
< head >
< title >cell padding</ title >
< style >
table, th, td {
border: 2px solid green;
text-align:center;
}
th, td {
padding: 20px;
background-color:none;
}
h1 {
color:green;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h2 >Cell Padding property</ h2 >
< h3 >padding: 20px;</ h3 >
< table style = "width:70%" >
< tr >
< th >Firstname</ th >
< th >Lastname</ th >
< th >Age</ th >
</ tr >
< tr >
< td >Harsh</ td >
< td >Agarwal</ td >
< td >15</ td >
</ tr >
< tr >
< td >Manas</ td >
< td >Chhabra</ td >
< td >27</ td >
</ tr >
< tr >
< td >Ramesh</ td >
< td >Chandra</ td >
< td >28</ td >
</ tr >
</ table >
</ center >
</ body >
</ html >
|
Output:
Cell Spacing
The cell spacing is used to define the space between the cells.
Example:
html
<!DOCTYPE html>
< html >
< head >
< title >cell spacing property</ title >
< 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 = "30px"</ h3 >
< table style = "width:70%;"
cellspacing = "30px" >
< tr >
< th >Firstname</ th >
< th >Lastname</ th >
< th >Age</ th >
</ tr >
< tr >
< td >Harsh</ td >
< td >Agarwal</ td >
< td >15</ td >
</ tr >
< tr >
< td >Manas</ td >
< td >Chhabra</ td >
< td >27</ td >
</ tr >
< tr >
< td >Manas</ td >
< td >Chhabra</ td >
< td >27</ td >
</ tr >
< tr >
< td >Ramesh</ td >
< td >Chandra</ td >
< td >28</ td >
</ tr >
</ table >
</ center >
</ body >
</ html >
|
Output:
Supported Browsers:
- Apple Safari
- Google Chrome
- Firefox
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...