468,530 Members | 1,551 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,530 developers. It's quick & easy.

Borders For Tables Hack

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.
Jul 20 '05 #1
2 3147
DU
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/doctorunc...ormatting.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/doctorunc...e7Section.html

Jul 20 '05 #2
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.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Hostile17 | last post: by
7 posts views Thread by Stan Brown | last post: by
reply views Thread by Phil Evans | last post: by
4 posts views Thread by NeverLift | last post: by
4 posts views Thread by Konrad Viltersten | last post: by
32 posts views Thread by Simon Dean | last post: by
9 posts views Thread by Michael Redbourn | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.