emulating default table borders in css

Discussion in 'HTML' started by Pine nut, Aug 14, 2007.

  1. Pine nut

    Pine nut Guest

    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
    Pine nut, Aug 14, 2007
    #1
    1. Advertising

  2. Pine nut

    Neredbojias Guest

    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.
    Neredbojias, Aug 14, 2007
    #2
    1. Advertising

  3. 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/
    Jukka K. Korpela, Aug 14, 2007
    #3
  4. Pine nut

    Pine nut Guest

    > 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
    Pine nut, Aug 14, 2007
    #4
  5. 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/
    Jukka K. Korpela, Aug 14, 2007
    #5
  6. 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
    Jonathan N. Little, Aug 14, 2007
    #6
  7. 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/
    Jukka K. Korpela, Aug 14, 2007
    #7
  8. 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
    Jonathan N. Little, Aug 14, 2007
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. news frontiernet.net
    Replies:
    6
    Views:
    1,178
    news frontiernet.net
    Dec 5, 2003
  2. George
    Replies:
    9
    Views:
    4,873
    George
    Oct 25, 2004
  3. Replies:
    2
    Views:
    647
    Martin Jay
    May 11, 2006
  4. Replies:
    1
    Views:
    398
    Jonathan N. Little
    Jan 12, 2007
  5. James
    Replies:
    2
    Views:
    582
    Michael Haufe (TNO)
    Nov 12, 2011
Loading...

Share This Page