In an HTML table, We can already set the cellpadding and cellspacing of a table. But, what if we like to implement with the help of CSS? Let’s see that.
This is used for formatting purpose that is used to specify the space needed between the edges of the cells and also in the cell contents.
This is one that is used for formatting but, there is quite major difference between cell padding and cell spacing. Cell padding is used for setting extra space that is used to separate cell walls from their contents whereas cell spacing is used for setting space between the cells.
Suppost, we have a table using “cellpadding” and “cellpadding” as below:
<table cellspacing="5" cellpadding="5">
For controlling the “cellpadding” using CSS, you can simply use padding on table cells.
E.g. for 5px of “cellpadding” the style will be:
td { padding: 5px; }
Read Also: Clearing floats
For controlling the “cellspacing” using CSS, you can apply the border-spacing CSS property to the table.
E.g. for 5px of “cellspacing” the style will be:
table { border-spacing: 5px; border-collapse: separate; }
So, this property will even allow separate horizontal and vertical spacing that you couldn’t do with old “cellspacing” format.
But for Internet Explorer <= 7, if the situation is just right i.e. you want 0 cellspacing and the table doesn’t have it defined already then, you can use border-collapse:collapse.
table { border-spacing: 0; border-collapse: collapse; }
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
Introduction The influence of words is more significant than ever in a digital age. Whether…
How to Start a Business begins with the realization that every business has its risks and…
It's not uncommon for businesses to have financial difficulties nowadays. The fact of the matter…
The success of any tech innovation depends on its share in various industries and business…
Facing Google penalties can be a daunting challenge for businesses relying on organic search traffic.…
Technology, undeniably, has made our lives easier. But the advent of artificial intelligence has been…
View Comments
Hello,
Thanks for sharing such informative and helpful blog post and you are doing a good job so keep posting such amazing articles.
It is really nice post. thank for sharing with us. it is very helpful for all people.