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?

Graminivorous

Answer 1

Cellspacing :

table { border-collapse: collapse; }

As for cellpadding, you can do

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

Classicist

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. – Graminivorous

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 :-) – Classicist

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. – Fishmonger

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. – Homecoming

Answer 2

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.

Liking

+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. – Antonelli

Answer 3

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.

Shaunshauna

Answer 4

table { border-collapse:collapse; }

Asaasabi

Answer 5

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.

Behan

Answer 6

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).

Homecoming