Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Borders For Tables Hack

Reply
Thread Tools

Borders For Tables Hack

 
 
Hostile17
Guest
Posts: n/a
 
      09-02-2003
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.
 
Reply With Quote
 
 
 
 
DU
Guest
Posts: n/a
 
      09-02-2003
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

 
Reply With Quote
 
 
 
 
Philipp Lenssen
Guest
Posts: n/a
 
      09-02-2003
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.
 
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
Borders around tables? Helen HTML 3 02-28-2006 10:13 PM
Tables and borders Jon HTML 6 05-20-2005 10:51 AM
Tables with different color left and right borders, no top or bottom borders, etc. George HTML 9 10-25-2004 04:25 PM
<asp:Panels, borders and HTML tables Mark Rae ASP .Net 3 10-06-2004 02:01 PM
Tables with solid black borders? Michael Wilcox HTML 3 07-07-2003 01:30 AM



Advertisments