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?

Was it helpful?

Solution

Cellspacing :

table { border-collapse: collapse; }

As for cellpadding, you can do

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

OTHER TIPS

mat already answered, but just for completeness:

  • paddingcellpadding
  • border-spacingcellspacing
  • 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.

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.

table { border-collapse:collapse; }

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top