473,290 Members | 1,897 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,290 software developers and data experts.

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 3422
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Hostile17 | last post by:
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...
7
by: Stan Brown | last post by:
http://www.acad.sunytccc.edu/instruct/sbrown/stat04/qz05_.htm A table comes near the beginning of the page. I have the <td> of row 1 column 1 styled in line with border-top:none and...
0
by: Phil Evans | last post by:
URL: http://philevans.com/tabletest.html A boring table, but one which illustrates my problem. I'm writing a large PHP app which outputs data tables. Users of the app can configure their...
4
by: NeverLift | last post by:
I've searched around and don't find the following incident discussed specifically. First, a comment from an experience programmer new to JavaScript: While I am new to javascript, I've...
4
by: Konrad Viltersten | last post by:
As it isnow i have to use a syntax for my tables as: <table class = "some" border> and/or <table class = "some" noborder> Now, what i'd like to do is to make that border-thingy...
32
by: Simon Dean | last post by:
Duh... Not another one... Hopefully simple though, I hate the way *I* (and it might be a CSS trait) can't intermix fixed width divisional elements with a variable auto expanding div??? The...
9
by: Michael Redbourn | last post by:
Hi, I just switched from FP to DW and am very very happy ! So whilst I'm mastering Dreamweaver (gonna be a while yet :-) - I thought that I'd try and find out how to add borders for browers...
0
by: LStewart | last post by:
Hi Guys, I am having some trouble with some tables. What I want to do is make it so that the table prints out on paper with the table borders. The borders are there on the web page in the...
0
by: Fonix | last post by:
I'm trying to make table border with pyExcelerator. As i can see there is only cell formating!? If i'm wrong pls tell me what is method to make more then one cell to have same format, other then...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.