Set Cellpadding and Cellspacing in Css

Set cellpadding and cellspacing in CSS?

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Want to use cellpadding and cellspacing in table by CSS class in different style file

try to this way

used to for cellspacing table{border-collapse: separate; border-spacing: 3px;} and cellpadding td{padding:2px;}

demo

 .product_tabel    {        border: solid 1px red;border-collapse: separate;border-spacing: 3px;      border:solid 1px red;    }
.product_tabel td, .product_tabel th{border:solid 1px green;padding:2px;}

<table class="product_tabel"><tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr>  <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr>  <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr>  <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr>  <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr>  </table>

Why are cellspacing and cellpadding not CSS styles

Cellspacing :

table { border-collapse: collapse; }

As for cellpadding, you can do

table tr td, table tr th { padding: 0; }

CSS table cellpadding and cellspacing?

table {  
    border-collapse: collapse;
}
th, td {
    padding: 0;
}

Set Table cellspacing color

Option 1: use solid outline for cells.

#table {  border-spacing: 2px;  position: absolute;  top: 0;}
#table td {  outline: 2px solid #ccc;}
#table td.green {  border: 1px solid green;}
#table td.red {  border: 1px solid red;}

<table id="table">  <tr>    <td class="green">Cell one</td>    <td>Cell two</td>  </tr>  <tr>    <td>Cell three</td>    <td class="red">Cell four</td>  </tr></table>

X and Y in cellpadding=

So, if you come across this question in the future, and you are looking for a solution for your Website, than I highly recommend you to use CSS instead of the deprecated HTML Attributes cellpadding and cellspacing! You could either define it inline, so it may feels a bit like cellpadding, but preferably you should write this declarations in an external CSS File and define something like

td {
    padding: 5px; /* cellpadding */
    margin: 5px; /* cellspacing */
}

You can even set the padding and margin of every single side of the element like this:

td {
  padding: 5px 10px 15px 20px; /* top, right, bottom, left */
  margin:  5px 10px 15px 20px; /* equal to padding */
}

Now, if you came across this question, because you are currently developing an HTML Email Template, than at first take my condolences. It is a realy horrible task, even (or especially) these days.

Writing HTML Emails is the only excuse to use deprecated HTML Elements and Attributes instead of up-to-date CSS Solutions, because the handling of CSS is very different from Email Client to Email Client, and most of them have some legacy support for deprecated Stuff. In every case, you should test as much as possible, to check out, if there may is an CSS solution, which works across the most common Clients (different Browser-, and Webclients, Outlook, Win10 Mail App, iOS and Android native Mail Apps, Inbox or Gmail App, and so on...). If it works: use CSS! Only use the old fashioned HTML, if this works better.

In every case you need to use inline CSS declarations, because most Email Clients cut off CSS defined in the <head>, and they won't load external files at all.

And now, to answer the question: with cellpadding and cellspacing it is not possible to set an individual padding or spacing for each side, you can just specify a number which applies to every side, unfortunately. But in this specific case, i think it is safe to use inline css with padding and / or margin, which is supported by most of the Email Clients, as far as I remember.

Set Cellpadding and Cellspacing in Css