Simple Border Question

[webber]

This is a rather basic question vis-a-vis the HTML tag for borders. I'd like to have a border around my table but NOT around the cells within the table. I've been unable to do this with the <BORDER> tag. Is there another way I can do it?

[welo]

You can sit one table inside another one that has only one <td> and <tr>. This way your border only applies to the containing table. That's the easiest way I can think of.

[webber]

Thanks for your reply, Welo. I tried your suggestion, but there is still a double line for where the border should be on account of the single cell. Therefore, there is one borderline for the table itself and one borderline for the cell containing the second table. Isn't there anyway to have just one line?

[welo]

Why don't you go ahead and post your code (or a link to the page) so I can see what's happening? I can't be much help otherwise. :)

[webber]

http://www32.brinkster.com/webber79/index.htm

When you open this page in the browser, you'll see two borders essentially.....one of the table with the border tag, and the other of the single cell inside this table. What I want is a single line. I hope I'm making some sense here! And by the way, thanks a lot for your help.

[Charles]

From http://www.w3.org/TR/html4/struct/tables.html#h-11.1
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.And you will also find that Style Sheets allow you greater control over your borders.

<div style="border:solid 1px #000000; float:left">
HELLO WORLD
</div>

[welo]

You're welcome, webber :).

Here are a couple of ways to do it:

<table border="0" cellpadding="3" cellspacing="1" bgcolor="black">
<tr bgcolor="white">
<td>
<table border="0" bgcolor="white">
<tr>
<td>HELLO</td>
<td>WORLD</td>
</tr>
</table>
</td>
</tr>
</table>
This assumes you are using a solid background color. Basically you just create a border with cellspacing. Another method:

<table style="border: solid 1px #000000; padding: 4px">
<tr>
<td>
<table border="0" bgcolor="white">
<tr>
<td>HELLO</td>
<td>WORLD</td>
</tr>
</table>
</td>
</tr>
</table>
will give you more flexibility. Hope this helps. :)

[Stefan]

Originally posted by welo
You can sit one table inside another one that has only one <td> and <tr>. This way your border only applies to the containing table. That's the easiest way I can think of.

And it's about the worst way I can think of.

Abusing tables for layout is bad enough. NESTING tables, and just to get a border, is even worse.

Charles suggestion of using a simple div is the far superior option.

[welo]

Originally posted by Stefan
And it's about the worst way I can think of.

Abusing tables for layout is bad enough. NESTING tables, and just to get a border, is even worse.

Charles suggestion of using a simple div is the far superior option.

All webber wanted to know was how to put a non-conflicting border on a table, and I provided exactly that solution. I fail to recall a single instance where someone asked to be nitpicked on their method (or their solution), or to be preached to about whatever W3C compliant method exists to do it differently.

If you can put a table inside another and achieve the effect you want on a web page, there's absolutely nothing wrong with it. All the solution must do is work. It doesn't matter how it was achieved as long as the code is clean.

[nkaisare]

Zillion ways to do this and you provided the worst possible one. Again, this is my opinion (as also Stefan's). Its upto webber to use whatever he finds easier.

Method 1:

<table style="border: solid 1px #000000; padding: 4px">
<tr>
<td>
<table border="0" bgcolor="white">
<tr>
<td>HELLO</td>
<td>WORLD</td>
</tr>
</table>
</td>
</tr>
</table>


Method 2:

<div style="border:solid 1px #000000; float:left">
HELLO WORLD
</div>


Method 3: (for people insiting on using tables)

<table style="border: solid 1px #000">
<tr>
<td>HELLO</td>
<td>WORLD</td>
</tr>
</table>


I'd prefer method 2, 3 and 1 in that order, for getting the border. What you want to do is entirely your choice.

[swon]

posted by welo
If you can put a table inside another and achieve the effect you want on a web page, there's absolutely nothing wrong with it. All the solution must do is work. It doesn't matter how it was achieved as long as the code is clean.


I agree with that, I don't see your problem with tables, Stefan!

[Charles]

Originally posted by welo
If you can put a table inside another and achieve the effect you want on a web page, there's absolutely nothing wrong with it. All the solution must do is work. It doesn't matter how it was achieved as long as the code is clean. Except that the solution doesn't work. It makes the page fail on certain browsers.

[swon]

And what about NS4.5, if you give them in a table a style=border:1px solid black; attribute, that doesn't work!

[Charles]

You don't get the border, but the page is still usable. A mis-use of tables makes the page completely unusable on cerain browsers. Moreover, users of NN4 can upgrade while Braille and audio browsers are becomming less tolerant of table abuse.

[Stefan]

Originally posted by swon
I agree with that, I don't see your problem with tables, Stefan!

I don't have a problem with tables. In fact i use tables quite a lot.
They are excellent for marking up tabular data.
For general page layout however there is definitly better options...

[meow]

Why does everyone assume that webber's table is for layout and not for tabular data? :rolleyes: :D

[Charles]

In that case he's still not allowed to nest tables and he needs to use the same CSS border property with his one TABLE element.

[King Pellinore]

Information on tables:
From http://www.w3.org/TR/html401/struct/tables.html#h-11.3.1The following attributes affect a table's external frame and internal rules.

Attribute definitions

frame = void|above|below|hsides|lhs|rhs|vsides|box|border [CI]
This attribute specifies which sides of the frame surrounding a table will be visible. Possible values:
void: No sides. This is the default value.
above: The top side only.
below: The bottom side only.
hsides: The top and bottom sides only.
vsides: The right and left sides only.
lhs: The left-hand side only.
rhs: The right-hand side only.
box: All four sides.
border: All four sides.

rules = none|groups|rows|cols|all [CI]
This attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values:
none: No rules. This is the default value.
groups: Rules will appear between row groups (see THEAD, TFOOT, and TBODY) and column groups (see COLGROUP and COL) only.
rows: Rules will appear between rows only.
cols: Rules will appear between columns only.
all: Rules will appear between all rows and columns.

border = pixels [CN]
This attributes specifies the width (in pixels only) of the frame around a table (see the Note below for more information about this attribute).My notes on this: The FRAME attribute applies to the outer border of a table.
The RULES attribute applies to the borders between the cells.
Why use HTML, when you can use CSS?

Here is a link to the CSS treatment of tables: http://www.w3.org/TR/REC-CSS2/tables.html#q20

In the following example, I use separate styles for the table and the cells to give the desired effect. This is because each cell has a border and each table has a border and these two are independent of each other.

Ok.

CSS for table:<style media="screen" type="text/css">
<!--
table {border: solid thick #777;}
td {border: none;}
-->
</style>The table:<table><tr>
<td>ABCD</td>
<td>EFGH</td>
</tr><tr>
<td>IJKL</td>
<td>MNOP</td>
</tr><tr>
<td>QRST</td>
<td>UVWX</td>
</tr></table>
YZ

If you paste this into a document (with or without the DOCTYPE) it should work. A table with a grey border.

This table also lets you learn the alphabet, taking it four letters at a time and two in the end as a bonus for good work.

Also, please don't tell each other what to do. Every person on the earth has the right to type whatever into a file and save it with a DOCTYPE, without a DOCTYPE or with a DOGTYPE if they want. However, the chances to become a respected web designer with a DOGTYPE are small.

[Charles]

Originally posted by King Pellinore
Every person on the earth has the right to type whatever into a file... Strictly speacking and from the standpoint of the law that's not true. In certain places and under certain conditions you are required to make your page accessible to persons with disabilities. And mis-using tables makes your page inaccessible. A bad web developer can land his or her client in court.