html - Set cellpadding and cellspacing in CSS?

ID : 127

viewed : 282

Tags : htmlcsshtml-tablealignmenthtml





Top 5 Answer for html - Set cellpadding and cellspacing in CSS?

vote vote

99

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.

vote vote

87

Default

The default behavior of the browser is equivalent to:

table {border-collapse: collapse;} td    {padding: 0px;} 

         Enter image description here

Cellpadding

Sets the amount of space between the contents of the cell and the cell wall

table {border-collapse: collapse;} td    {padding: 6px;} 

        Enter image description here

Cellspacing

Controls the space between table cells

table {border-spacing: 2px;} td    {padding: 0px;} 

        Enter image description here

Both

table {border-spacing: 2px;} td    {padding: 6px;} 

        Enter image description here

Both (special)

table {border-spacing: 8px 2px;} td    {padding: 6px;} 

        Enter image description here

Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.

Try it yourself!

Here you can find the old HTML way of achieving this.

vote vote

77

table {     border-collapse: collapse; /* 'cellspacing' equivalent */ }  table td, table th {     padding: 0; /* 'cellpadding' equivalent */ } 
vote vote

69

Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.

You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.

vote vote

52

This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:

table {     border-collapse: separate;     border-spacing: 10px; /* cellspacing */     *border-collapse: expression('separate', cellSpacing = '10px'); }  table td, table th {     padding: 10px; /* cellpadding */ } 

The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.

expression('separate', cellSpacing = '10px') returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.

Top 3 video Explaining html - Set cellpadding and cellspacing in CSS?







Related QUESTION?