CSS: Difference between cell padding and Cells spacing

CSS and HTML are the simplest code developers can have, but there are things which make us confused specially the new developers. One of these confusing things is the difference between cell padding and Cell spacing. And these two are the most important property to format a HTML table. So let’s discuss and clear it.
Both cellpadding and Cellspacing properties are used for formatting the table content and to improve the look and feel of an html table.

Cell padding

Cell padding is the space between the cell content and the cell border.

CSS Code:

td { padding: 10px;}

The above code will look like below.

cellpaddingcellspacing1

Cell spacing is used to set space between cells. We can say it as border spacing between each cells. To use this property you have to use border-spacing CSS property.

CSS Code:

table { border-spacing: 10px;

border-collapse: separate;}

The border-collapse css property is used to set the table borders. Whether the borders are collapsed into a single border or separated. The above code will look like below image.

cellpaddingcellspacing2

 

** This css property will work in almost all popular browsers. But like all other cases in this case also the exception is Internet Explorer. For IE<8 this CSS property will not work.

You can use both the cell padding and Cell spacing property together.

Arijit Naskar

Arijit Naskar is a Software Developer and QA, also founder of alltechstories.com a popular tech tutorial & how-to website since 2014. He loves to explore new technologies and writing blogs.

You may also like...