Rounded rectange for BG of certain items in an HTML table

[btyo462]

Hi all. I'm using CSS to format the vast majority of a client's site. A few of their pages have actual HTML tables in them with data (comparison charts for temperature grades to be precise). I was hoping that someone could help me format them so that they don't just look like lousy tables. What I'd like is for each cell to have a rounded rectangle background for the text to rest on top of. Here is an example. I was hoping to do it with a simple

Code: Select all

td {
}

selector, but I'm not sure if it's possible. I have seen tables and charts like this before, so I assumed there was a way. Anyone? Thanks!

[unitedcraig]

http://webdesign.about.com/od/css/a/aa072406.htm
http://www.spiffycorners.com/
http://kalsey.com/2003/07/rounded_corners_in_css/
http://www.html.it/articoli/nifty/index.html
http://www.sitepoint.com/article/css...s-boxes-curves
http://www.fireandknowledge.org/arch...images-part-1/

Just did a quick google search and found these, not had chance to have a look so don't no how good they are

Hope they help

Craig

[unitedcraig]

Edit:

a quick search on google

http://www.google.co.uk/search?q=rou...ient=firefox-a

can sometimes be useful in looking for answers

[btyo462]

Thanks for the reply, I appreciate it. I too tried the google search before posting and got the same results. The reason I posted is because those methods explained how to manually make individual divs that you could later put content in. I currently have several HTML tables with data in them that I was hoping to edit to make their backgrounds have rounded corners, instead of creating and sizing new divs one by one that are specifically tailored for each table cell's dimensions. What I am looking for would be this, but with it's corners round, instead of sharp. Sorry if I am being redundant, I just assumed there was a way to do this with CSS without recreating each and every single table cell. Thanks again, look forward to hearing more input.

[unitedcraig]

Couldn't you just use

Code: Select all

#td {
}

and then include the information to change the corners?

[btyo462]

Originally Posted by unitedcraig

Couldn't you just use

Code: Select all

#td {
}

and then include the information to change the corners?

I'm not sure, that's what I was hoping. Does anyone know the syntax for that? I'm sure it's something simple that I can't seem to dig up.

[unitedcraig]

Would you not be able to include the information on
http://webdesign.about.com/od/css/a/aa072406.htm

and place this in a css as they have done, what's wrong with doing that?

[btyo462]

this method is a little too advanced for me to properly apply it to my table cells. i've only been working with css for about a week now and that lady has me scratching my head. thanks anyways. <sniffle>

[unitedcraig]

do you have a link to your site?

If not send me your page and i'll see what i can do

[btyo462]

Really? Thanks, I really appreciate it. Here's the link. I warn you that my code is quite likely redundant, messy, and all around silly...so any touch up suggestions are welcome. Thanks again.

[unitedcraig]

I'll take a look at it for you, watch this space

[unitedcraig]

Here are the files, read the comments in the code and post if theres anything you don't understand.

Hope this helps

Craig

[unitedcraig]

Also, make sure that the files are in the same directory/folder when viewing, other wise the CSS will not link to it

Craig