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 >w3wiki</ 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 >w3wiki</ 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: