Hi,

I have the following code:

<table border="0" cellspacing="1" cellpadding="2" bgcolor="#2B5178" width="580">

I'd like to shorten it down to:

<table class="myclass" width="580">

The problem I have when I try to define this style is that it doesn't seem to react to my cellspacing definition. The background color takes, as does the padding, but the cell spacing, which normally makes it look like there is a 1px border around each cell, is too fat. It appears to be about 2-3 pixels wide, but it is the right color (the background color I specified).

The definition I used for my style is below, what can I change to make this work the way it works without styles?

.myclass { background-color:#2B5178; cell-spacing:1; cell-padding:2; }

Hi pjmair,

I am not quite sure what you intended the table to look like as you are writing about borders without specifying one.

However, you might try the following:

- always use length units in CSS when attributing values to margins, paddings, widths, heights,...
  example:
     wrong: .myclass { padding: 2;}
     correct: .myclass { padding: 2px;}

- there are no attributes cell-spacing and cell-padding in CSS.
  Use border-spacing and padding instead. Unfortunately the border-spacing attribute will not work in Internet Explorer though, but as you do not specify any border, setting the padding to the desired value will suffice. Keep in mind that the padding-attribute will put a padding around the specified class or element, i.e. if you define padding of say 5px for a table, there will be a padding of 5px around the whole table. To use padding for table cells you have to define it for the td-element.

If you would like to have borders around each table cell you must define these for the td-elements rather than for the table-element:

table { border: 1px solid #00CC00; } draws a green border around the whole table

td { border: 1px solid #00CC00; } draws a green border around each cell

Now if you do not want any spaces between the borders of the table cells you can use the attribute border-collapse for the table:
table { border: 1px solid #00CC00; border-collapse: collapse; }

To sum it up, your class should work fine using this expression:

.myclass { width: 580px; background-color:#2B5178; border-collapse: collapse; }

td { padding: 2px; }

This expression will result in a table of width 580px with a blueish background. There will be no space between each table cell but the cells themselves have a padding of 2px.

Hope my explanation is not too confusing :)

jens

Hi guys,

One thing I notice missing from the answer is that the CSS style change for td needs to be specific for .myclass. The way to specify that is:

.myclass {width: 580px; background-color: #2B5178; border-collapse: collapse;}
.myclass td {padding: 2px;}

Otherwise all of the table cells on the page will use the 'padding: 2px' setting instead of just tables with class="myclass".

This might be a duh, but I thought I'd mention it.

Chad.

Chad Lupkes
[email protected]
http://www.seattlewebcrafters.com