How can I create nice table borders like Microsoft site

[midi25]

Hi how can I create nice slim borders on my tables. I would like to have borders like on Microsofts site.

I have noticed alot of sites now have table borders that are ultra slim. The HTML code i am using is just adding thick lines around my table.

<table width="120" bordercolor="#0066FF" border="1">

What can I do to get ultra slim borders.

Please help

[DrDoc]

The answer is (drum roll) - CSS!

If possible, use DIVs instead of tables. Otherwise, style your tables using CSS. Either way, here's the solution:

style="border:solid 1px #cccccc;"

For example, consider this DIV:

<div style="border:solid 1px #cccccc;height:300px;width:120px;">Some text here!</div>

[midi25]

Thanks have sorted it.

Funny I know asp and vb6 yet have never bothered to learn how to do such a simple thing as that.

Thanks Its worked fine now. CSS looks good.

[aspdaddy]

You could also use this in your table tag:

frame="void" rules="rows" border="1"

[martinibuster]

Not sure if the css examples are backward compatible to NN 4.7.

If that's an issue then you can nest a pair of tables, with the inner table 2px smaller in the width and height. Then set the background color of the larger outer table to black, or whatever line color that you want.

[kiwanji]

DrDoc-

That is a very cool way to sort out content without using tables but how would you build multiple rows and columns, etc. like when we use tables?

Thanks-

[WibbleWobble]

style="border:solid 1px #cccccc;"

I'm not entirely sure, but technically, shouldn't it be border:[width] [style] [colour]; - though it probably doesn't make much difference to "clever" browsers (read: ones that compensate for errors)

WW.

[limbo]

Or you could try this:

<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>

the cell spacing (set to 1) becomes your "border"

I think this works in most browsers

[DrDoc]

WibbleWobble, you're right. Thanks for catching that. It should be border: 1px solid #cccccc;