homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS - background margins
CSS table cell margins with coloured BG

10+ Year Member

Msg#: 254 posted 3:34 am on Jul 30, 2002 (gmt 0)


I have been to W3Schools to answer this one with no luck. I have a table cell that I want coloured with a pale yellow background. The thing is I want a 10 pixel margin (all 4 sides) with white space. In other words, I would like the yellow BG 'indented' by 10px from all sides. Padding the TD doesn't work. Can I do this with CSS using "margin-top -10px" or something like that? (You can tell I am at an early stage of my CSS learning so sorry if this is too basic!)



Thors Hammer

10+ Year Member

Msg#: 254 posted 3:52 am on Jul 30, 2002 (gmt 0)

Give these a try, you might find what you need here;


My first thought was to do something with a 'tile' of the color that would be an image, that you could then use the padding command to effect. But maybe the above links will offer a way to do it other than that. I am sure others that are versed in this area will be around soon to offer other opinions.

Good luck. :)

hope it helps



WebmasterWorld Senior Member 10+ Year Member

Msg#: 254 posted 4:10 am on Jul 30, 2002 (gmt 0)

Hello DiAMOndDavE,

Don't apologise for asking a "too basic" question. In reality, it is not. What you are trying to accomplish is representative of the issues that often arise when developers first venture into the realm of CSS.

Basically, you are still in "table layout mode" as far as "mindset" goes. And that's okay, it's to be expected; you learn as you go along and find soltutions to various presentational issues. Then, one day, CSS will all make perfect sense and from that point on, everything will be much, much easier.

Styling tables can be a bit intimidating even for those developers moderately advanced in the world of CSS - table styles have a few important differences from the older HTML styling techniques. It's not difficult... just different is certain aspects.

For a good reference consult the W3C: [w3.org...]

But now back to your issue: You would like to have a pale yellow background with a white 10 px padding/border/spacing/blankspace or any combination thereof... Assuming ;) you will be placing something INSIDE the <td>, why not style the content to achieve your goal?

CSS is ALL about perspective and approach: Why not have a "white background" with a paragraph, div or whatever HTML element you intended to place within the table cell, styled using (if paragraph) p.ltyellow10 {background:#ffc; border:10px solid #fff; padding:3px;margin:0;}? The padding was added to give some "breathing room" for your text, the margin:0; to remove the paragraph element's default "before and after" spacing.

Then apply the style:
<td><p class="ltyellow10">My 10px-white-border-pale-yellow-background-paragraph-in-a-table-cell!</p></td> The result would give you the 10px whitespace you are looking for... and, well, you know the rest. You can use various combinations to achieve the "presentational" styling you are looking for. Experiment, have fun.

There are many methods to achieve styling in most cases. It's just a matter of perspective... ;)

eys blurred,
mind not much better...
need zzzzz.....

- papabaer


10+ Year Member

Msg#: 254 posted 5:50 am on Jul 30, 2002 (gmt 0)

As they say down here in Australia...you are a few cans short of a 6-pack. Get some coffee or sleep (or both!). In the meantime, thank you for the excellent advice. Thanks also to Thor.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved