emulating default table borders in css

P

Pine nut

hi ...

my web client really likes the "translucent" look of the default borders
that are used as part of the <table> tag, with CELLSPACE as 2 and BORDER as
1.

is there any way to emulate this in CSS?

thanks!!

PineNUT
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Tue, 14 Aug 2007 07:59:13
GMT Pine nut scribed:
hi ...

my web client really likes the "translucent" look of the default
borders that are used as part of the <table> tag, with CELLSPACE as 2
and BORDER as 1.

is there any way to emulate this in CSS?
Click to expand...

If they are the _default_ borders, why do you have to emulate them?
 
J

Jukka K. Korpela

Scripsit Neredbojias:
If they are the _default_ borders, why do you have to emulate them?
Click to expand...

I'd rather ask why that should be done in CSS when there is a clear idea of
how to achieve the desired effect in HTML. Just as a matter of principle? Or
because there are zillions of tables to consider, or some style sheet that
set table borders that need to be overridden?

A border of one pixel is _not_ the default, but _if_ a border is set using
<table border="1">, then the apperance is by default an outset border, which
is probably what is meant by "translucent" here.

Anyway, the CSS counterpart of border="1" in a <table> tag consists of
border-width: 1px; border-style: outset;
for the table and
border-width: 1px; border-style: inset;
for each cell.

The CSS counterpart to cellspacing="2" is border-spacing: 2px, but this
isn't supported by IE.

More info on mapping presentational HTML to CSS:
http://www.cs.tut.fi/~jkorpela/html2css.html

P.S. I'm pretty sure most users find "translucent" borders unpleasant. They
look too vague to be useful, yet noticeable enough to be an esthetic
nuisance. A solid border, perhaps set to some other color than black, is
usually better.
 
P

Pine nut

A border of one pixel is _not_ the default, but _if_ a border is set using
<table border="1">, then the apperance is by default an outset border, which
is probably what is meant by "translucent" here.

Anyway, the CSS counterpart of border="1" in a <table> tag consists of
border-width: 1px; border-style: outset;
for the table and
border-width: 1px; border-style: inset;
for each cell.

The CSS counterpart to cellspacing="2" is border-spacing: 2px, but this
isn't supported by IE.
Click to expand...

thanks Jukka, that's almost what I need.

what I wanted was to define a DIV ID that would emulate that same border
effect, but there seems no table-border or cell-spacing equivalents for
defining a DIV.

PineNUT
 
J

Jukka K. Korpela

Scripsit Pine nut:
what I wanted was to define a DIV ID that would emulate that same
border effect, but there seems no table-border or cell-spacing
equivalents for defining a DIV.
Click to expand...

We might have found, and might still find, a solution to your problem faster
if you started from the real problem description and posted the URL of the
page.

Do you mean that you are simulating a table with a DIV element containing
other DIV elements (which simulate table cells)? I wonder whether that's a
good idea. Anyway, then you simply have to set the border for each DIV
element separately and set _margin_ properties for them suitably. Beware
that vertical margins collapse so that 2 + 2 is not 4 but 2 whereas
horizontal margins do not collapse. So effectively you would set margin: 2px
1px for the inner DIV elements. This makes top and bottom margin 2px
(resulting in a net spacing of 2px due to the collapse) and left and right
margin 1px (resulting in a net spacing of 2px due to additive effect).

However, this depends on how you use the DIV elements - do you use floating,
or positioning, or what?
 
J

Jonathan N. Little

Jukka said:
The CSS counterpart to cellspacing="2" is border-spacing: 2px, but this
isn't supported by IE.
Click to expand...

Sure? Seem to work for me MSIE6 on Win2K

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>CSS vs Deprecated</title>

<style type="text/css">
table.css { border: 1px outset #000; border-spacing: 2px; }
table.css td { border: 1px inset #000; }
</style>
</head>
<body>

<table class="css">
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
</table>

<table border="1" cellspacing="2">
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
</table>

</body>
</html>

Change border-spacing to 5px and cellspacing to 5 and MSIE accommodates
just fine.
 
J

Jukka K. Korpela

Scripsit Jonathan N. Little:
Sure? Seem to work for me MSIE6 on Win2K
Click to expand...

Strange. I tested (with your test document) both on MSIE 6 on Win98 and on
MSIE 7 on Win XP, and it completely ignores the border-spacing property.
Besides, the property is not mention in Microsoft's documentation, which
appears to be generally exhaustive regarding to CSS support in IE:
http://msdn2.microsoft.com/en-us/library/ms531207.aspx
Change border-spacing to 5px and cellspacing to 5 and MSIE
accommodates just fine.
Click to expand...

When I test it, the table without cellspacing attribute (with border-spacing
set in CSS) keeps the default cellspacing of 2 pixels, no matter what I set
for border-spacing.
 
J

Jonathan N. Little

Jukka said:
Scripsit Jonathan N. Little:


Strange. I tested (with your test document) both on MSIE 6 on Win98 and
on MSIE 7 on Win XP, and it completely ignores the border-spacing
property. Besides, the property is not mention in Microsoft's
documentation, which appears to be generally exhaustive regarding to CSS
support in IE:
http://msdn2.microsoft.com/en-us/library/ms531207.aspx


When I test it, the table without cellspacing attribute (with
border-spacing set in CSS) keeps the default cellspacing of 2 pixels, no
matter what I set for border-spacing.
Click to expand...

Pardon, my error you're correct, must have looked at the wrong window.
Damn MSIE sucks...I don't use it but is sure is a pain to try and
accommodate it with a somewhat consistent look across browsers...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Beginer <TABLE BORDER="1"> Question..? 23
CSS Grid in a nutshell (Part 1) 0
Working on mobile css menu with plenty of frustration! 2
Word tables borders 0
Borders 5
Only one table shows up with the information 2
selective table borders ? 2
Horizontal scrollable table that is responsive 11

Members online

Total: 25 (members: 1, guests: 24)
Robots: 503

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top