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 |
Educational technology has been very helpful in the era of ever-advancing technology. It opens millions…
Have you ever thought of a world where asking the Internet for information feels like…
We've gotten so used to seeing men streetwear joggers, ripped jeans, and sleeveless shirts. Hair…
When it comes to festivals, the options for wedding jewellery are endless. You can go…
Whether it concerns your home or an office building, the state of a property’s windows…
You know that running an environmentally sustainable business is the right thing to do. But…
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.