20

Eric meyer reset css is suggesting "tables still need 'cellspacing="0"' in the markup". Is it necessary? and what is the benefit of border-collapse: collapse; and border-spacing: 0;?

and it's only suggesting to use cellspacing, while table has another property called cellpadding? 

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}
Darryl Hein
  • 142,451
  • 95
  • 218
  • 261
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

3 Answers3

12

cellpadding is not suggested because the padding css property sufficiently overrides the default properties for the cellpadding table attribute. As the other answer says, there is no compatible CSS property for cellspacing in older browsers, leaving an HTML attribute as the only way to completely "reset" this setting to 0. border-spacing: 0; takes care of this for browsers which do support it.

As for border-collapse — by default, table cells each have their own border, and collapse will merge the borders between adjacent cells together, giving the appearance of a (usually single-pixel) grid, which isn't achievable any other way when cellspacing="0". Before border-collapse was commonly supported, this is why you'd see tables with cellspacing="1" and a background color on the table, and white backgrounds on table cells.

border-collapse:collapse; is in the reset.css simply because it is the most common desired result. If you don't want this mode, you'd be fine removing this from the reset.css.

Nicole
  • 32,841
  • 11
  • 75
  • 101
6

Internet Explorer 6 and 7, and probably other early browsers, do not recognize the border-spacing attribute and as such, he suggests you still supply the values in the HTML as well.

Check out the compatibility table on SitePoint

Doug Neiner
  • 65,509
  • 13
  • 109
  • 118
2

There are two types of borders in a table, the table itself can have borders (outer borders and borders between cells), and each cell can have borders around them.

Using border-collapse: collapse; means that two cells with the same border settings next to each other will only get a single set of bordering instead of a double, e.g. the right border of one cell will collapse with the left border on the next cell in the row.

There wes no CSS style for the table border between cells until CSS 2, so it has to be disabled using the HTML attribute cellspacing="0" on the table to support older browsers like IE 7*. If there is table borders between the cells, the border collapsing will naturally not work as the borders are not next to each other.

* I truly enjoyed the feeling of calling IE 7 an "older browser" ;)

Guffa
  • 687,336
  • 108
  • 737
  • 1,005