Help request: table cell spacing issue

[mattdna]

HTML newbie here....

I have a table with 3 horizontal cells, with the cellspacing currently set to 10. see code below.

I want to increase the space between cells 1 and 2 and cells 2 and 3 without increasing the spacing on the other 3 sides of the cell.

So ideally the spacing values for the 1st cell would be: top cell spacing 10, right 20, bottom 10, and left 5. Then same values for cell 2, and finally same values for cell 3 but with the right being 5 (to create the same width in from edge of page).

Can anyone help me with the code for this?

Thanks




<table width="100" cellpadding="10" cellspacing="10">
<tbody>
<tr align="center" valign="bottom">

<td style="border: 1px solid rgb(220, 220, 220);">CONTENT</td>

<td style="border: 1px solid rgb(220, 220, 220);">CONTENT</td>

<td style="border: 1px solid rgb(220, 220, 220);">CONTENT</td>

</tr>

</tbody>
</table>

[lucy24]

Urk. Take a little time off to learn basic CSS. Properties like spacing, padding and borders should never be in the html itself-- especially when they are the same over and over again.

Table cells have two properties that often look alike to the viewer but they're different behind the scenes.

"spacing" is the CSS property border-spacing or border-collapse. It's set globally on the whole table, and can be set separately for horizontal and vertical. This is the space between cells.

"padding" is the CSS property cell-padding. It can be set globally for all cells, or for a named class of cells, or one individual cell. And the four sides in each case can be set individually or all as a group. This is the blank space around the edges of a cell.

The easiest way to see the difference is to set different background-colors on the table and on the cell.

:: shuffling papers ::

[w3.org...]

Scroll down to the various colorful pictures starting about halfway down the page (Forums software is wonky about linking to # fragments).

[zabalex]

Hi,
Also the tbody is not required now a days as it was being used some years before. If you have to call some style many number of times on a page just write it on a css file and include the css file in the header of the page and just call the class whenever required to use that style. As you have used

style="border: 1px solid rgb(220, 220, 220);" for three times you could better write it on a css file like

.tdborder {border: 1px solid rgb(220, 220, 220);}

and call the class in your td like
<td class"tdborder"> it will serve the same as you have mentioned.

regards
zabalex

[lucy24]

Oh, and let's make that color #DDD, shorthand for #DDDDDD. DD is 221; use "web-safe" colors whenever you can. Uhm, yes, I do have the multiples of 17 up to 255 memorized, along with their hexadecimal equivalents. Why do you ask?

[mattdna]

Lucy / Zabalex - thanks for taking the time to reply - appreciate it.

My site is actually built using CSS, but when I attempted to do tables in CSS, for some reason they wouldn't display properly in Internet Explorer - some of the borders were missing. The table was fine when viewed in Dreamweaver, but not in IE (ok in Chrome too - haven't tried Firefox). So I gave up trying to do in CSS and used the above HTML code - which seems to work fine in all browsers. Is there something I don't know about table compatibility with IE?

Lucy - thanks for the link - I will read that and have any another stab at doing in CSS.