Website design - Tables question

[dak142]

Quick question. I am working on a layout and I can not seem to figure out how to make those tables that have the "rounded" corners.

Right now all I have is a table row, with a background color in it, on top of another table, with text in it. Is there something out there to create something like that, or even purchase them?

Second, how do you thin a border thickness down to less than "1". I use a border thickness of 1 and it is too think. I see site all over that have nice thin border arouns their tables, how is this done?

[tombola]

I see site all over that have nice thin border arouns their tables, how is this done?

The next time you see a page with rounded corners, just view the source code of that page and you'll see immediately how they did that ;-)

You can use CSS to style your borders.

[pmkpmk]

There's no HTML command to make table-corners rounded. All rounded corners are done with small graphic elements, placed in the right position.

You can do this manually, by creating table cells with the rounded corners in them.

A more versatile approach is to use Cascading Style Sheets (CSS) which will basically do the same - placing graphic elements in the borders - but in a more sophisticated and "cleaner" manner. However as a newbie in HTML the whole CSS conecpt might be a bit intimidating. Especially if you have deadlines to meet plain HTML might be the easiert choice.

[Stratus42]

Rounded corners for boxes are done by building a table with, say, three columns and (at least) three rows.. the corner cells all have an image in them that is a picture of a rounded corner.

nice thin borders around tables are usually done with CSS - as others have said.. it's not that tricky.. you can do it like this...

<style>
table {border-collapse: collapse;}
td {border: 1px solid #000;}
</style>

<table>
<tr>
<td> this is my table cell</td>
<td> this is another one</td>
</tr>
</table>

this will apply a 1 pixel thick black solid border around all table cells. the bit that says "border collapse".. that just tells the table not to double up the borders .. so cells next to each other, each with a 1 px thick border, won't appear to have a 2 px thick border.

does this help?

Lana
(whoops.. had to fix a typo!.. must learn to preview)

[HelenDev]

I have heard that you can use this

-moz-border-radius: 12px;

but it is a proprietary thing that only works in mozilla and Netscape (6?)

Never tried it myself though.

It would be cool if they write rounded corners into the next css spec.

[brucec]

I know CSS well and have not heard of that style. Did you make sure it is a W3 proposed element. They have tons of those.

[isitreal]

You can find more on Mozilla proprietary css tags here [webmasterworld.com]

Includes links to resources.

[estebones]

what I have done in the past is:
I set up my regular tables as normal but I would use images within the tables themselves in orderto achieve this, ofcourse the tables would be set to

<table cell spacing="1" cell padding="3" border="0">
<tr>
<td width="50%" background="path/roundedcornerimage.jpg">
content</td>
<td width="50%" background="path/roundedcornerimage.jpg">
content</td>
</tr>
</table>

just a thought that I hope can help you out.

--esteban

[mep00]

A List Apart had a couple of articles: (www.a list apart.com/articles/customcorners2/)Creating Custom Corners & Borders. (That's Part 2; there's a link there for Part 1.) It should be easy enough to follow even if you don't have a lot of experience.