Set cellpadding and cellspacing in CSS

Question

In an HTML table  the cellpadding and cellspacing can be set like this    lt table cellspacing  1  cellpadding  1  gt    How can the same be accomplished using CSS

User · Answer

This worked for me  table  border-collapse  collapse  table th  table td  padding  0

User · Answer

td       padding  npx     For cellpadding        margin  npx     For cellspacing        border-collapse  collapse     For showing borders in a better shape         If margin didn t work  try to set display of tr to block and then margin will work

User · Answer

You can easily set padding inside the table cells using the CSS padding property  It is a valid way to produce the same effect as the table s cellpadding attribute    x000D   x000D  table  x000D  th  x000D  td   x000D    border  1px solid  666  x000D    x000D   x000D  table th  x000D  table td   x000D    padding  10px  x000D       Apply cell padding    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D   x000D     lt meta charset  utf-8  gt  x000D     lt title gt Set Cellpadding in CSS lt  title gt  x000D   x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt Row lt  th gt  x000D           lt th gt First Name lt  th gt  x000D           lt th gt Last Name lt  th gt  x000D           lt th gt Email lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Clark lt  td gt  x000D           lt td gt Kent lt  td gt  x000D           lt td gt clarkkent mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 2 lt  td gt  x000D           lt td gt Peter lt  td gt  x000D           lt td gt Parker lt  td gt  x000D           lt td gt peterparker mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 3 lt  td gt  x000D           lt td gt John lt  td gt  x000D           lt td gt Rambo lt  td gt  x000D           lt td gt johnrambo mail com lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Similarly  you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute  However  in order to work border-spacing the value of border-collapse property muse be separate  which is default    x000D   x000D  table   x000D    border-collapse  separate  x000D    border-spacing  10px  x000D       Apply cell spacing    x000D    x000D   x000D  table  x000D  th  x000D  td   x000D    border  1px solid  666  x000D    x000D   x000D  table th  x000D  table td   x000D    padding  5px  x000D       Apply cell padding    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D   x000D     lt meta charset  utf-8  gt  x000D     lt title gt Set Cellspacing in CSS lt  title gt  x000D   x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt Row lt  th gt  x000D           lt th gt First Name lt  th gt  x000D           lt th gt Last Name lt  th gt  x000D           lt th gt Email lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Clark lt  td gt  x000D           lt td gt Kent lt  td gt  x000D           lt td gt clarkkent mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 2 lt  td gt  x000D           lt td gt Peter lt  td gt  x000D           lt td gt Parker lt  td gt  x000D           lt td gt peterparker mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 3 lt  td gt  x000D           lt td gt John lt  td gt  x000D           lt td gt Rambo lt  td gt  x000D           lt td gt johnrambo mail com lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

lt table gt       lt tr gt           lt th gt Col 1 lt  th gt           lt th gt Col 2 lt  th gt           lt th gt Col 3 lt  th gt       lt  tr gt       lt tr gt           lt td gt 1 lt  td gt           lt td gt 2 lt  td gt           lt td gt 3 lt  td gt       lt  tr gt   lt  table gt    cell-padding can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table   table       border-spacing  10px    td       padding  10px      Fiddle

User · Answer

Just use border-collapse  collapse for your table  and padding for th or td

User · Answer

table th td       padding  8px 2px    table       border-collapse  separate      border-spacing  2px

User · Answer

Just use border-collapse  collapse for your table  and padding for th or td

User · Answer

table       border-collapse  collapse      cellspacing  equivalent       table td  table th       padding  0      cellpadding  equivalent

User · Answer

table       border-collapse  collapse      cellspacing  equivalent       table td  table th       padding  0      cellpadding  equivalent

User · Answer

table       border-spacing  4px       color   000       background   ccc     td       padding-left  4px

User · Answer

In an HTML table  the cellpadding and cellspacing can be set like this   For cell-padding   Just call simple td th cell padding   Example    x000D   x000D         Call-Padding            x000D   x000D  table   x000D      border-collapse  collapse  x000D    x000D   x000D  td   x000D    border  1px solid red  x000D    padding  10px  x000D    x000D   lt table gt  x000D           lt tr gt  x000D               lt th gt Head1  lt  th gt  x000D               lt th gt Head2  lt  th gt  x000D               lt th gt Head3  lt  th gt  x000D               lt th gt Head4  lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 11 lt  td gt  x000D               lt td gt 12 lt  td gt  x000D               lt td gt 13 lt  td gt  x000D               lt td gt 14 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 21 lt  td gt  x000D               lt td gt 22 lt  td gt  x000D               lt td gt 23 lt  td gt  x000D               lt td gt 24 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 31 lt  td gt  x000D               lt td gt 32 lt  td gt  x000D               lt td gt 33 lt  td gt  x000D               lt td gt 34 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 41 lt  td gt  x000D               lt td gt 42 lt  td gt  x000D               lt td gt 43 lt  td gt  x000D               lt td gt 44 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    table       border-collapse  collapse     td     border  1px solid red    padding  10px      For cell-spacing  Just call simple table border-spacing  Example    x000D   x000D             Cell-Spacing             x000D  table   x000D      border-spacing  10px  x000D      border-collapse  separate  x000D    x000D   x000D  td   x000D    border  1px solid red  x000D    x000D   lt table gt  x000D           lt tr gt  x000D               lt th gt Head1 lt  th gt  x000D               lt th gt Head2 lt  th gt  x000D               lt th gt Head3 lt  th gt  x000D               lt th gt Head4 lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 11 lt  td gt  x000D               lt td gt 12 lt  td gt  x000D               lt td gt 13 lt  td gt  x000D               lt td gt 14 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 21 lt  td gt  x000D               lt td gt 22 lt  td gt  x000D               lt td gt 23 lt  td gt  x000D               lt td gt 24 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 31 lt  td gt  x000D               lt td gt 32 lt  td gt  x000D               lt td gt 33 lt  td gt  x000D               lt td gt 34 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 41 lt  td gt  x000D               lt td gt 42 lt  td gt  x000D               lt td gt 43 lt  td gt  x000D               lt td gt 44 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D               Cell-Spacing             table       border-spacing  10px      border-collapse  separate     td     border  1px solid red      More table style by CSS source link here you get more table style by CSS

User · Answer

This style is for full reset for tables - cellpadding  cellspacing and borders   I had this style in my reset css file   table      border 0              Replace border        border-spacing  0px     Replace cellspacing        border-collapse  collapse     Patch for Internet Explorer 6 and Internet Explorer 7      table td      padding  0px     Replace cellpadding

User · Answer

I used  important after the border-collapse like  border-collapse  collapse  important    and it works for me in IE7  It seems to override the cellspacing attribute

User · Answer

From what I understand from the W3C classifications is that  lt table gt s are meant for displaying data  only    Based on that I found it a lot easier to create a  lt div gt  with the backgrounds and all that and have a table with data floating over it using position  absolute  and background  transparent      It works on Chrome  Internet nbsp Explorer  6 and later  and Mozilla Firefox  2 and later    Margins are used  or meant anyways  to create a spacer between container elements  like  lt table gt    lt div gt  and  lt form gt   not  lt tr gt    lt td gt    lt span gt  or  lt input gt   Using it for anything other than container elements will keep you busy adjusting your website for future browser updates

User · Answer

Default  The default behavior of the browser is equivalent to   table  border-collapse  collapse   td     padding  0px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Cellpadding  Sets the amount of space between the contents of the cell and the cell wall  table  border-collapse  collapse   td     padding  6px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Cellspacing  Controls the space between table cells  table  border-spacing  2px   td     padding  0px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Both  table  border-spacing  2px   td     padding  6px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Both  special   table  border-spacing  8px 2px   td     padding  6px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp      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

User · Answer

Wrap the contents of the cell with a div and you can do anything you want  but you have to wrap every cell in a column to get a uniform effect  For example  to just get wider left  amp  right margins   So the CSS will be    x000D   x000D  div cellwidener   x000D    margin  0px 15px 0px 15px  x000D    x000D  td tight   x000D    padding  0px  x000D    x000D   lt table border  0  gt  x000D     lt tr gt  x000D       lt td class  tight  gt  x000D         lt div class  cellwidener  gt My content lt  div gt  x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Yes  it s a hassle  Yes  it works with Internet nbsp Explorer  In fact  I ve only tested this with Internet nbsp Explorer  because that s all we re allowed to use at work

User · Answer

This hack works for Internet nbsp Explorer nbsp 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 nbsp 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

User · Answer

lt table gt       lt tr gt           lt th gt Col 1 lt  th gt           lt th gt Col 2 lt  th gt           lt th gt Col 3 lt  th gt       lt  tr gt       lt tr gt           lt td gt 1 lt  td gt           lt td gt 2 lt  td gt           lt td gt 3 lt  td gt       lt  tr gt   lt  table gt    cell-padding can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table   table       border-spacing  10px    td       padding  10px      Fiddle

User · Answer

From what I understand from the W3C classifications is that  lt table gt s are meant for displaying data  only    Based on that I found it a lot easier to create a  lt div gt  with the backgrounds and all that and have a table with data floating over it using position  absolute  and background  transparent      It works on Chrome  Internet nbsp Explorer  6 and later  and Mozilla Firefox  2 and later    Margins are used  or meant anyways  to create a spacer between container elements  like  lt table gt    lt div gt  and  lt form gt   not  lt tr gt    lt td gt    lt span gt  or  lt input gt   Using it for anything other than container elements will keep you busy adjusting your website for future browser updates

User · Answer

td       padding  npx     For cellpadding        margin  npx     For cellspacing        border-collapse  collapse     For showing borders in a better shape         If margin didn t work  try to set display of tr to block and then margin will work

User · Answer

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 nbsp 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

User · Answer

For those who want a non-zero cellspacing value  the following CSS worked for me  but I m only able to test it in Firefox   See the Quirksmode link posted elsewhere for compatibility details  It seems it may not work with older Internet nbsp Explorer versions   table       border-collapse  separate      border-spacing  2px

User · Answer

Say that we want to assign a 10px  quot cellpadding quot  and a 15px  quot cellspacing quot  to our table  in a HTML5-compliant way  I will show here two methods giving really similar outputs  Two different sets of CSS properties apply to the same HTML markup for the table  but with opposite concepts   the first one uses the default value for border-collapse  separate  and uses border-spacing to provide the cellspacing   the second one switches border-collapse to collapse and uses the border property as the cellspacing    In both cases  the cellpadding is achieved by assigning padding 10px to the tds and  in both cases  the background-color assigned to them is only for the sake of a clearer demo  First method   x000D   x000D  table border-spacing 15px  td background-color  00eb55 padding 10px border 0  x000D   lt table gt   lt tr gt   lt td gt Header 1 lt  td gt  lt td gt Header 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 1 lt  td gt  lt td gt 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 3 lt  td gt  lt td gt 4 lt  td gt   lt  tr gt   lt  table gt  x000D   x000D   x000D   Second method   x000D   x000D  table border-collapse collapse  td background-color  00eb55 padding 10px border 15px solid  fff  x000D   lt table gt   lt tr gt   lt td gt Header 1 lt  td gt  lt td gt Header 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 1 lt  td gt  lt td gt 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 3 lt  td gt  lt td gt 4 lt  td gt   lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

For tables  cellspacing and cellpadding are obsolete in HTML 5   Now for cellspacing you have to use border-spacing  And for cellpadding you have to use border-collapse   And make sure you don t use this in your HTML5 code  Always try to use these values in a CSS nbsp 3 file

User · Answer

I suggest this and all the cells for the particular table are effected  table tbl classname td  th       padding  5px 5px 5px 4px

User · Answer

You can check the below code just create a index html and run it   x000D   x000D   lt  DOCTYPE html gt   lt html gt    lt head gt     lt style gt      table         border-spacing  10px                 td         padding  10px           lt  style gt   lt  head gt    lt body gt     lt table cellspacing  0  cellpadding  0  gt       lt th gt Col 1 lt  th gt       lt th gt Col 2 lt  th gt       lt th gt Col 3 lt  th gt       lt tr gt         lt td gt 1 lt  td gt         lt td gt 2 lt  td gt         lt td gt 3 lt  td gt       lt  tr gt     lt  table gt   lt  body gt    lt  html gt  x000D   x000D   x000D   OUTPUT

User · Answer

The simple solution to this problem is    table       border  1px solid  000000      border-collapse  collapse      border-spacing  0px    table td       padding  8px 8px

User · Answer

table th td       padding  8px 2px    table       border-collapse  separate      border-spacing  2px

User · Answer

For those who want a non-zero cellspacing value  the following CSS worked for me  but I m only able to test it in Firefox   See the Quirksmode link posted elsewhere for compatibility details  It seems it may not work with older Internet nbsp Explorer versions   table       border-collapse  separate      border-spacing  2px

User · Answer

Also  if you want cellspacing  0   don t forget to add border-collapse  collapse in your table s stylesheet

User · Answer

Wrap the contents of the cell with a div and you can do anything you want  but you have to wrap every cell in a column to get a uniform effect  For example  to just get wider left  amp  right margins   So the CSS will be    x000D   x000D  div cellwidener   x000D    margin  0px 15px 0px 15px  x000D    x000D  td tight   x000D    padding  0px  x000D    x000D   lt table border  0  gt  x000D     lt tr gt  x000D       lt td class  tight  gt  x000D         lt div class  cellwidener  gt My content lt  div gt  x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Yes  it s a hassle  Yes  it works with Internet nbsp Explorer  In fact  I ve only tested this with Internet nbsp Explorer  because that s all we re allowed to use at work

User · Answer

I suggest this and all the cells for the particular table are effected  table tbl classname td  th       padding  5px 5px 5px 4px

User · Answer

In an HTML table  the cellpadding and cellspacing can be set like this   For cell-padding   Just call simple td th cell padding   Example    x000D   x000D         Call-Padding            x000D   x000D  table   x000D      border-collapse  collapse  x000D    x000D   x000D  td   x000D    border  1px solid red  x000D    padding  10px  x000D    x000D   lt table gt  x000D           lt tr gt  x000D               lt th gt Head1  lt  th gt  x000D               lt th gt Head2  lt  th gt  x000D               lt th gt Head3  lt  th gt  x000D               lt th gt Head4  lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 11 lt  td gt  x000D               lt td gt 12 lt  td gt  x000D               lt td gt 13 lt  td gt  x000D               lt td gt 14 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 21 lt  td gt  x000D               lt td gt 22 lt  td gt  x000D               lt td gt 23 lt  td gt  x000D               lt td gt 24 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 31 lt  td gt  x000D               lt td gt 32 lt  td gt  x000D               lt td gt 33 lt  td gt  x000D               lt td gt 34 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 41 lt  td gt  x000D               lt td gt 42 lt  td gt  x000D               lt td gt 43 lt  td gt  x000D               lt td gt 44 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D    table       border-collapse  collapse     td     border  1px solid red    padding  10px      For cell-spacing  Just call simple table border-spacing  Example    x000D   x000D             Cell-Spacing             x000D  table   x000D      border-spacing  10px  x000D      border-collapse  separate  x000D    x000D   x000D  td   x000D    border  1px solid red  x000D    x000D   lt table gt  x000D           lt tr gt  x000D               lt th gt Head1 lt  th gt  x000D               lt th gt Head2 lt  th gt  x000D               lt th gt Head3 lt  th gt  x000D               lt th gt Head4 lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 11 lt  td gt  x000D               lt td gt 12 lt  td gt  x000D               lt td gt 13 lt  td gt  x000D               lt td gt 14 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 21 lt  td gt  x000D               lt td gt 22 lt  td gt  x000D               lt td gt 23 lt  td gt  x000D               lt td gt 24 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 31 lt  td gt  x000D               lt td gt 32 lt  td gt  x000D               lt td gt 33 lt  td gt  x000D               lt td gt 34 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt 41 lt  td gt  x000D               lt td gt 42 lt  td gt  x000D               lt td gt 43 lt  td gt  x000D               lt td gt 44 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   x000D   x000D               Cell-Spacing             table       border-spacing  10px      border-collapse  separate     td     border  1px solid red      More table style by CSS source link here you get more table style by CSS

User · Answer

Basics For controlling  quot cellpadding quot  in CSS  you can simply use padding on table cells  E g  for 10px of  quot cellpadding quot   td        padding  10px     For  quot cellspacing quot   you can apply the border-spacing CSS property to your table  E g  for 10px of  quot cellspacing quot   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  quot cellspacing quot   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  quot almost quot  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  quot 0 quot   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

User · Answer

Say that we want to assign a 10px  quot cellpadding quot  and a 15px  quot cellspacing quot  to our table  in a HTML5-compliant way  I will show here two methods giving really similar outputs  Two different sets of CSS properties apply to the same HTML markup for the table  but with opposite concepts   the first one uses the default value for border-collapse  separate  and uses border-spacing to provide the cellspacing   the second one switches border-collapse to collapse and uses the border property as the cellspacing    In both cases  the cellpadding is achieved by assigning padding 10px to the tds and  in both cases  the background-color assigned to them is only for the sake of a clearer demo  First method   x000D   x000D  table border-spacing 15px  td background-color  00eb55 padding 10px border 0  x000D   lt table gt   lt tr gt   lt td gt Header 1 lt  td gt  lt td gt Header 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 1 lt  td gt  lt td gt 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 3 lt  td gt  lt td gt 4 lt  td gt   lt  tr gt   lt  table gt  x000D   x000D   x000D   Second method   x000D   x000D  table border-collapse collapse  td background-color  00eb55 padding 10px border 15px solid  fff  x000D   lt table gt   lt tr gt   lt td gt Header 1 lt  td gt  lt td gt Header 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 1 lt  td gt  lt td gt 2 lt  td gt   lt  tr gt   lt tr gt   lt td gt 3 lt  td gt  lt td gt 4 lt  td gt   lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

This worked for me  table  border-collapse  collapse  table th  table td  padding  0

User · Answer

The simple solution to this problem is    table       border  1px solid  000000      border-collapse  collapse      border-spacing  0px    table td       padding  8px 8px

User · Answer

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 nbsp 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

User · Answer

Also  if you want cellspacing  0   don t forget to add border-collapse  collapse in your table s stylesheet

User · Answer

This hack works for Internet nbsp Explorer nbsp 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 nbsp 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

User · Answer

Simply use CSS padding rules with table data    td        padding  20px      And for border spacing   table        border-spacing  1px      border-collapse  collapse      However  it can create problems in older version of browsers like Internet nbsp Explorer because of the diff implementation of the box model

User · Answer

You can simply do something like this in your CSS  using border-spacing and padding    x000D   x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  td  th   x000D    padding  1em  x000D    border  1px solid blue  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt th gt head 1 lt  th gt  x000D       lt th gt head 2 lt  th gt  x000D       lt th gt head 3 lt  th gt  x000D       lt th gt head 4 lt  th gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt txt 1 lt  td gt  x000D       lt td gt txt 2 lt  td gt  x000D       lt td gt txt 3 lt  td gt  x000D       lt td gt txt 4 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

CSS   selector      padding 0 0 10px 0     Top left bottom right

User · Answer

Basics For controlling  quot cellpadding quot  in CSS  you can simply use padding on table cells  E g  for 10px of  quot cellpadding quot   td        padding  10px     For  quot cellspacing quot   you can apply the border-spacing CSS property to your table  E g  for 10px of  quot cellspacing quot   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  quot cellspacing quot   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  quot almost quot  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  quot 0 quot   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

User · Answer

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 nbsp 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

User · Answer

How about adding the style directly to the table itself   This is instead of using table in your CSS  which is a BAD approach if you have multiple tables on your page    lt table style  border-collapse  separate border-spacing  2px   gt       lt tr gt           lt td style  padding  4px 4px   gt Some Text lt  td gt       lt  tr gt   lt  table gt

User · Answer

You can easily set padding inside the table cells using the CSS padding property  It is a valid way to produce the same effect as the table s cellpadding attribute    x000D   x000D  table  x000D  th  x000D  td   x000D    border  1px solid  666  x000D    x000D   x000D  table th  x000D  table td   x000D    padding  10px  x000D       Apply cell padding    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D   x000D     lt meta charset  utf-8  gt  x000D     lt title gt Set Cellpadding in CSS lt  title gt  x000D   x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt Row lt  th gt  x000D           lt th gt First Name lt  th gt  x000D           lt th gt Last Name lt  th gt  x000D           lt th gt Email lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Clark lt  td gt  x000D           lt td gt Kent lt  td gt  x000D           lt td gt clarkkent mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 2 lt  td gt  x000D           lt td gt Peter lt  td gt  x000D           lt td gt Parker lt  td gt  x000D           lt td gt peterparker mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 3 lt  td gt  x000D           lt td gt John lt  td gt  x000D           lt td gt Rambo lt  td gt  x000D           lt td gt johnrambo mail com lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Similarly  you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute  However  in order to work border-spacing the value of border-collapse property muse be separate  which is default    x000D   x000D  table   x000D    border-collapse  separate  x000D    border-spacing  10px  x000D       Apply cell spacing    x000D    x000D   x000D  table  x000D  th  x000D  td   x000D    border  1px solid  666  x000D    x000D   x000D  table th  x000D  table td   x000D    padding  5px  x000D       Apply cell padding    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D   x000D     lt meta charset  utf-8  gt  x000D     lt title gt Set Cellspacing in CSS lt  title gt  x000D   x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt Row lt  th gt  x000D           lt th gt First Name lt  th gt  x000D           lt th gt Last Name lt  th gt  x000D           lt th gt Email lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Clark lt  td gt  x000D           lt td gt Kent lt  td gt  x000D           lt td gt clarkkent mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 2 lt  td gt  x000D           lt td gt Peter lt  td gt  x000D           lt td gt Parker lt  td gt  x000D           lt td gt peterparker mail com lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 3 lt  td gt  x000D           lt td gt John lt  td gt  x000D           lt td gt Rambo lt  td gt  x000D           lt td gt johnrambo mail com lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

CSS   selector      padding 0 0 10px 0     Top left bottom right

User · Answer

table       border-spacing  4px       color   000       background   ccc     td       padding-left  4px

User · Answer

Simply use CSS padding rules with table data    td        padding  20px      And for border spacing   table        border-spacing  1px      border-collapse  collapse      However  it can create problems in older version of browsers like Internet nbsp Explorer because of the diff implementation of the box model

User · Answer

I used  important after the border-collapse like  border-collapse  collapse  important    and it works for me in IE7  It seems to override the cellspacing attribute

User · Answer

Default  The default behavior of the browser is equivalent to   table  border-collapse  collapse   td     padding  0px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Cellpadding  Sets the amount of space between the contents of the cell and the cell wall  table  border-collapse  collapse   td     padding  6px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Cellspacing  Controls the space between table cells  table  border-spacing  2px   td     padding  0px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Both  table  border-spacing  2px   td     padding  6px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   Both  special   table  border-spacing  8px 2px   td     padding  6px      nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp      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

User · Answer

For tables  cellspacing and cellpadding are obsolete in HTML 5   Now for cellspacing you have to use border-spacing  And for cellpadding you have to use border-collapse   And make sure you don t use this in your HTML5 code  Always try to use these values in a CSS nbsp 3 file

User · Answer

Try this   table       border-collapse  separate      border-spacing  10px    table td  table th       padding  10px      Or try this   table       border-collapse  collapse    table td  table th       padding  10px

User · Answer

You can check the below code just create a index html and run it   x000D   x000D   lt  DOCTYPE html gt   lt html gt    lt head gt     lt style gt      table         border-spacing  10px                 td         padding  10px           lt  style gt   lt  head gt    lt body gt     lt table cellspacing  0  cellpadding  0  gt       lt th gt Col 1 lt  th gt       lt th gt Col 2 lt  th gt       lt th gt Col 3 lt  th gt       lt tr gt         lt td gt 1 lt  td gt         lt td gt 2 lt  td gt         lt td gt 3 lt  td gt       lt  tr gt     lt  table gt   lt  body gt    lt  html gt  x000D   x000D   x000D   OUTPUT

User · Answer

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 nbsp 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

User · Answer

TBH  For all the fannying around with CSS you might as well just use cellpadding  0  cellspacing  0  since they are not deprecated     Anyone else suggesting margins on  lt td gt  s obviously has not tried this

User · Answer

Also  if you want cellspacing  0   don t forget to add border-collapse  collapse in your table s stylesheet

User · Answer

TBH  For all the fannying around with CSS you might as well just use cellpadding  0  cellspacing  0  since they are not deprecated     Anyone else suggesting margins on  lt td gt  s obviously has not tried this

User · Answer

This style is for full reset for tables - cellpadding  cellspacing and borders   I had this style in my reset css file   table      border 0              Replace border        border-spacing  0px     Replace cellspacing        border-collapse  collapse     Patch for Internet Explorer 6 and Internet Explorer 7      table td      padding  0px     Replace cellpadding

User · Answer

You can simply do something like this in your CSS  using border-spacing and padding    x000D   x000D  table   x000D    border-collapse  collapse  x000D    x000D   x000D  td  th   x000D    padding  1em  x000D    border  1px solid blue  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt th gt head 1 lt  th gt  x000D       lt th gt head 2 lt  th gt  x000D       lt th gt head 3 lt  th gt  x000D       lt th gt head 4 lt  th gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt txt 1 lt  td gt  x000D       lt td gt txt 2 lt  td gt  x000D       lt td gt txt 3 lt  td gt  x000D       lt td gt txt 4 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Try this   table       border-collapse  separate      border-spacing  10px    table td  table th       padding  10px      Or try this   table       border-collapse  collapse    table td  table th       padding  10px

User · Answer

How about adding the style directly to the table itself   This is instead of using table in your CSS  which is a BAD approach if you have multiple tables on your page    lt table style  border-collapse  separate border-spacing  2px   gt       lt tr gt           lt td style  padding  4px 4px   gt Some Text lt  td gt       lt  tr gt   lt  table gt

User · Answer

Also  if you want cellspacing  0   don t forget to add border-collapse  collapse in your table s stylesheet

[html] Set cellpadding and cellspacing in CSS?

Examples related to html

Examples related to css

Examples related to html-table

Examples related to alignment