Set cellpadding and cellspacing in CSS?

by

Basics

For controlling “cellpadding” in CSS, you can simply use padding on table cells. E.g. for 10px of “cellpadding”:

td { 
    padding: 10px;
}

For “cellspacing”, you can apply the border-spacing CSS property to your table. E.g. for 10px of “cellspacing”:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school “cellspacing”.

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you’re almost out of luck. I say “almost” because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you’re trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn’t have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

More Related Contents:

  1. Vertically align text next to an image?
  2. Does UL have default margin or padding [duplicate]
  3. Word-wrap in an HTML table
  4. How to deal with page breaks when printing a large HTML table
  5. HTML/CSS: Making two floating divs the same height
  6. How can I vertically center a div element for all browsers using CSS?
  7. Make a div fill the height of the remaining screen space
  8. Fixed header table with horizontal scrollbar and vertical scrollbar on
  9. How to remove unwanted space between rows and columns in table?
  10. How to make Scrollable Table with fixed headers using CSS [duplicate]
  11. How can I set the max-width of a table cell using percentages?
  12. Center aligning a fixed position div
  13. Add a horizontal scrollbar to an HTML table
  14. CSS – Make divs align horizontally
  15. using text-align center in colgroup
  16. overflow:scroll; in
  17. Linethrough/strikethrough a whole HTML table row
  18. Why is box-sizing acting different on table vs div?
  19. Table overflowing outside of div
  20. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  21. Responsive image align center bootstrap 3
  22. CSS align images and text on same line
  23. Border around tr element doesn’t show?
  24. How to align footer (div) to the bottom of the page? [duplicate]
  25. How to completely remove borders from HTML table
  26. with fixed and scrollable [duplicate]
  27. CSS: display:block; vs display:table;
  28. Setting max-height for table cell contents
  29. Splitting a table cell into two columns in HTML
  30. Table vertical header?

Leave a Comment