Borders For Tables Hack

Discussion in 'HTML' started by Hostile17, Sep 2, 2003.

  1. Hostile17

    Hostile17 Guest

    I've been trying to figure out a good way to make a CSS layout with
    nice-looking 1-pixel borders around the table cells.

    The only broadly compatible way to do this I know of is to have

    * the border of the table set to zero
    * the cellspacing of the table set to one
    * the background color set to black
    * the table cell background color set to white

    which looks nice in most modern browsers.

    However in Netscape four, the table has no borders at all, making it a
    little awkward for users to understand columns, rows etc.

    So here's my workaround:

    <html>
    <head>
    <style type="text/css" >
    table
    {
    background: black;
    border-width: 0px;
    border-style: none;
    }
    td
    {
    background: white;
    }
    </style>
    </head>
    <body>
    <table border="1" bordercolor="#ffffff" cellspacing="1"
    cellpadding="5">
    <tr>
    <td> blah </td>
    <td> blah </td>
    <td> blah </td>
    </tr>
    </table>
    </body>
    </html>

    This is kind of a hack, but it means that IE sees one-pixel borders
    and Netscape four and older see old-fashioned raised-type gray
    borders.

    It doesn't look so great in Netscape 7/Mozilla though, because they
    don't recognise the bordercolor thing.

    Also, bordercolor is not valid HTML.

    Does anyone know a good way to achieve 1-pixel borders which works in
    Netscape 4 and recent CSS-compatible browsers? I'd be interested to
    see any other approaches -- I've been juggling different style sheets
    and HTML combinations for a while now...

    The only other way I know is the way they do it at Salon, which
    involves lots of empty table cells with spacers in them and that's
    just overkill.
    Hostile17, Sep 2, 2003
    #1
    1. Advertising

  2. Hostile17

    DU Guest

    Hostile17 wrote:
    > I've been trying to figure out a good way to make a CSS layout with
    > nice-looking 1-pixel borders around the table cells.
    >
    > The only broadly compatible way to do this I know of is to have
    >
    > * the border of the table set to zero
    > * the cellspacing of the table set to one
    > * the background color set to black
    > * the table cell background color set to white
    >
    > which looks nice in most modern browsers.
    >
    > However in Netscape four, the table has no borders at all, making it a
    > little awkward for users to understand columns, rows etc.
    >
    > So here's my workaround:
    >
    > <html>
    > <head>
    > <style type="text/css" >
    > table
    > {
    > background: black;
    > border-width: 0px;
    > border-style: none;
    > }
    > td
    > {
    > background: white;
    > }
    > </style>
    > </head>
    > <body>
    > <table border="1" bordercolor="#ffffff" cellspacing="1"
    > cellpadding="5">
    > <tr>
    > <td> blah </td>
    > <td> blah </td>
    > <td> blah </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    > This is kind of a hack, but it means that IE sees one-pixel borders
    > and Netscape four and older see old-fashioned raised-type gray
    > borders.
    >
    > It doesn't look so great in Netscape 7/Mozilla though, because they
    > don't recognise the bordercolor thing.
    >
    > Also, bordercolor is not valid HTML.
    >
    > Does anyone know a good way to achieve 1-pixel borders which works in
    > Netscape 4 and recent CSS-compatible browsers? I'd be interested to
    > see any other approaches -- I've been juggling different style sheets
    > and HTML combinations for a while now...
    >
    > The only other way I know is the way they do it at Salon, which
    > involves lots of empty table cells with spacers in them and that's
    > just overkill.


    The nr 1 problem with your request is NS 4.x. People are switching to NS
    7.1 or to Mozilla-Firebird you know and a large majority of them are not
    reverting back. Trying to control layout and rendering on old and
    non-compliant browsers is a bad idea. As long as content is accessible
    on such old and non-compliant browsers, I do not recommend trying to do
    anything more.

    FWIW, Dynamic table formatting for DOM 1 browsers:
    http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DynamicTableFormatting.html

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
    DU, Sep 2, 2003
    #2
    1. Advertising

  3. Hostile17 wrote:

    > I've been trying to figure out a good way to make a CSS layout with
    > nice-looking 1-pixel borders around the table cells.
    >
    > The only broadly compatible way to do this I know of is to have
    >
    > * the border of the table set to zero
    > * the cellspacing of the table set to one
    > * the background color set to black
    > * the table cell background color set to white
    >


    How about:

    table { border-collapse: collapse; }
    th, td { border: 1px solid black; }

    >
    > However in Netscape four


    Hmm, did you say Netscape 4... that's no fun.
    Philipp Lenssen, Sep 2, 2003
    #3
    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. Mark Rae

    <asp:Panels, borders and HTML tables

    Mark Rae, Oct 6, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    5,019
    Mark Rae
    Oct 6, 2004
  2. Michael Wilcox

    Tables with solid black borders?

    Michael Wilcox, Jul 7, 2003, in forum: HTML
    Replies:
    3
    Views:
    23,653
    Michael Wilcox
    Jul 7, 2003
  3. George
    Replies:
    9
    Views:
    4,895
    George
    Oct 25, 2004
  4. Jon

    Tables and borders

    Jon, May 17, 2005, in forum: HTML
    Replies:
    6
    Views:
    505
    Safalra
    May 20, 2005
  5. Helen

    Borders around tables?

    Helen, Feb 28, 2006, in forum: HTML
    Replies:
    3
    Views:
    570
    Jonathan N. Little
    Feb 28, 2006
Loading...

Share This Page