Why are cellspacing and cellpadding not CSS styles

Question

I don't know why this bothers me so much, but when I create websites, I always try to do all my styling with CSS. However one thing I always have to remember to do when I'm working with tables is add cellspacing="0" and cellpadding="0"

Why is there not a CSS property to override these antiquated HTML 4 attributes?

Answer 1

table { border-collapse:collapse; }

Answer 2

Cellspacing :

table { border-collapse: collapse; }

As for cellpadding, you can do

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

Answer 3

I guess somebody considered cell spacing a “bad practice”. How I understand it is equivalent included in CSS2 standard but IE does not support this property. border-collapse allows to set spacing to 0 value. Cell padding may be achieved setting padding property to TD elements of a table.

Answer 4

mat already answered, but just for completeness:

• padding → cellpadding
• border-spacing → cellspacing
• border-collapse → no HTML equivalent

It's also worth remembering that you can set separate horizontal and vertical values for the CSS ones e.g. border-spacing: 0 1px.

Answer 5

Eric Myer's reset stylesheet contains the following 'reset' style for table :

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

In addition TD, TR are reset :

thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

The reason I mention this is that he has a comment 'tables still need cellpadding=0'. I assume he put this in here for a reason - probably needed by some old browsers. Judging by the fact that this is one of the very few comments he included I'm guessing its important and that there's a good reason for it.

Based on this comment - and this comment alone! - i'm continuing to use cellspacing="0" in the markup unless someone tells me definitively (below) why I dont need to. It could however likely be unnecessary in any modern browser worth supporting these days.

Answer 6

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

This is't working for me. My code is as follows.

HTML goes like this:

<table class="wrapper">
  <tr>
    <td><table class="header">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td></tr></table>

And the CSS for this is as follows:

table thead, tr, th, td {margin:0;padding:0;border:none;border-collapse: collapse;border-spacing: 0;}
.wrapper{width:100%; height:auto;}
.header{width:1006px; height:auto;}

Please Help