Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > emulating default table borders in css

Reply
Thread Tools

emulating default table borders in css

 
 
Pine nut
Guest
Posts: n/a
 
      08-14-2007
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


 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      08-14-2007
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?


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

--
Neredbojias
Half lies are worth twice as much as whole lies.
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      08-14-2007
Scripsit Neredbojias:

>> 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?

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


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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Pine nut
Guest
Posts: n/a
 
      08-14-2007
> 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.


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


 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      08-14-2007
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.


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?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      08-14-2007
Jukka K. Korpela wrote:

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


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.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      08-14-2007
Scripsit Jonathan N. Little:

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

>
> Sure? Seem to work for me MSIE6 on Win2K


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.


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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      08-14-2007
Jukka K. Korpela wrote:
> Scripsit Jonathan N. Little:
>
>> Jukka K. Korpela wrote:
>>
>>> The CSS counterpart to cellspacing="2" is border-spacing: 2px, but
>>> this isn't supported by IE.

>>
>> Sure? Seem to work for me MSIE6 on Win2K

>
> 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.

>
> 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.
>


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...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
emulating a flash based site with dynamic html/css/javascript James Javascript 2 11-12-2011 06:21 PM
getting css defined borders to span across mutiple cells in a table akh2103@gmail.com HTML 1 01-12-2007 10:31 PM
css table borders and spacing kemton@kemton.com HTML 2 05-11-2006 05:47 AM
Tables with different color left and right borders, no top or bottom borders, etc. George HTML 9 10-25-2004 04:25 PM
Changing individual table cell or row borders with CSS news frontiernet.net HTML 6 12-05-2003 03:46 AM



Advertisments