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="#f fffff" 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.
