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?

score 65 · Accepted Answer · answered Dec 03 '08 at 23:44

65

Cellspacing :

table { border-collapse: collapse; }

As for cellpadding, you can do

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

answered Dec 03 '08 at 23:44

mat

12,943
5
39
44

1

Thanks for that, I never really understood what border-collapse was suppose to mean. I'll have to start using that instead of using the old HTML attribute way. – Ryan Smith Dec 04 '08 at 00:40
Well, without border-collapse, if there are two adjacent cells with a 1px border each, you'll end up having a 2px border, because the borders are adjacents, with border-collapse, the borders are, well, collapsed :-) – mat Dec 04 '08 at 10:04
17

Note that `border-collapse:collapse` produces a completely different visual effect than `cellspacing="0"`; the two methods are not actually equivalent or interchangeable in any meaningful or useful way. – Martha Feb 03 '10 at 15:12
I downvote the "border-collapse:collapse" in CSS, which has a different purpose (its effect is effectively to *also* remove the spacing completely as it will merge the inner borders of cells by dividing them by 2). The correct answer is "border-spacing: n" in CSS for the cellspacing="n" attribute. "border-spacing:0" still does not collapse the inner borders or cells, they are just glued. – verdy_p Jun 18 '20 at 00:42

score 42 · Answer 2 · answered Dec 07 '08 at 00:06

42

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.

answered Dec 07 '08 at 00:06

1

+1 for border-spacing. border-collapse in my case produces weird bold borders in some tables, but border-spacing:0; actually does the same as cellspacing="0px" attribute in table element does. – Ignas2526 Jul 24 '13 at 10:03

score 9 · Answer 3 · answered Jan 24 '09 at 23:55

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.

score 0 · Answer 4 · answered Dec 03 '08 at 23:37

0

table { border-collapse:collapse; }

answered Dec 03 '08 at 23:37

Jimmy

89,068
17
119
137

score 0 · Answer 5 · answered Dec 03 '08 at 23:49

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.

score 0 · Answer 6 · answered Jun 18 '20 at 00:52

It's still a shame that cells cannot inherit their default padding from a CSS property of the row (tr), otherwise from rowgroup (thead/tbdy/tfoot) if it's not "initial", colgroup if it's not "initial", or the whole table.

"cellspacing" dos not have this problem (but in fact they are margins around cells, and these outer margins collapse with margins of the neighouring cells, and with the inner paddings of the table/rowgroup or row, where they are filled by the table's "background" setting (the table background also includes the table's "border" which is drawn on top of it and that also clips this background on the outer edge of the table's border, notably when this border has rounded corners).

But for the cellpadding, It would be jut simpler to defined "cell-padding: n" as a table or group property rather than on each cell separately and explicitly with its own "border: n" style (which should only be used if we need to override the padding in some specific cells).

Why are cellspacing and cellpadding not CSS styles

6 Answers6

Linked