473,218 Members | 1,683 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,218 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 3405
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...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

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.