how'd you do that?!

dc519 · #1 (**permalink**) 03-15-2002, 06:08 AM

i'm trying to do something very simple, butit is turning out to be very complicated! all i want to do is create a small table-looking thing such as you have on your page. for example, on the left hand side you have 3 three small tables labeled 'Random Stuff', 'Search', and 'Newsletter'. how did you create the table with the thin black outline? did you use cascading style sheets?

Also, if you go tohttp://www.deskmod.com you will see a better example of what i mean. There, the author has created similar looking tables but with rounded edges. Could you please give me some advice as to how i could go about doing the same thing?
thanks, darren

Till · #2 (**permalink**) 03-15-2002, 01:16 PM

Hi Darren!

What you long for is usually achieved by using nested tables and the infamous "spacer.gif".

Some code:

Code:

<table border="0" cellpadding="0" cellspacing="0">
<!-- upper outline -->
<tr><td colspan="3" bgcolor="#000000"><img src="spacer.gif" width="1" height="1"></td></tr>
<!-- eof upper outline -->
<tr>
<!-- left outline -->
<td bgcolor="#000000"><img src="spacer.gif" width="1" 
height="1"></td>
<!-- eof left outline -->
<!-- middle -->
<td>
<table border="0">
<tr><td>
Random Stuff<br>
Search<br>
...<br>
</td></tr>
</table>
</td>
<!-- eof middle -->
<!-- right outline -->
<td bgcolor="#000000"><img src="spacer.gif" width="1" height="1"></td>
<!-- eof right outline -->
</tr>
<!-- bottom outline -->
<tr><td colspan="3" bgcolor="#000000"><img src="spacer.gif" width="1" height="1"></td></tr>
<!-- eof bottom outline -->
</table>

Some explainage.

This creates a nested table with a black outline (that is, if spacer.gif is black as well).

I have three rows in the outter table. One doing the upper part, one for the middle (that is left side, middle, right side) and one doing the bottom part. In the middle, I put another table to format it all nicely.

If you want to achieve something like DeskMod, you'd have to create seperate cells for the corners, instead of spanning top and bottom row accross all three colums (rowspan="3").

I included some HTML comments () to show you what I was talking about. The eof shows you where it ends.

I hope that helps.

Nate · #3 (**permalink**) 03-17-2002, 05:55 PM

Darren,

Although Till's way will work, there's a much easier way with a simple nested table. Basically, you make the outer table a background color with a cellspacing of 1 (to create the outline) then make another table with set bgcolor props...see below.

Code:

<!-- start outside table for outline --> 
<table bgcolor="#000000" cellspacing=0 cellpadding=1 border=0><tr><td> 
<!-- start inner table for content --> 
<table bgcolor="#EEEEEE" cellspacing=0 cellpadding=5 border=0> 
<!-- upper cell: --> 
<tr><td bgcolor="#888888"> 
<p align="center"><font face="Verdana, Arial, Helvetica, Sans" size=2 color="#EEEEEE">Moo</font></p> 
</td></tr> 
<!-- lower cell: --> 
<tr><td> 
<p><font face="Verdana, Arial, Helvetica, Sans" size=2>Blah blah blah, etc.</font></p> 
</td></tr> 
</table> 
<!-- end inner table for content --> 
</table> 
<!-- end outside table for outline -->

I find that much easier than trying to play around with spacers in cells. This also allows you to have a cellpadding amount (margin) for the inner table (so your content isn't right up against the outside).

Hope that helps,
Nate

P.S. The corners on deskmod are graphics, and that gets a lot more complicated (personally, I hate to use graphics the way deskmod does just because of browser errors and misrenderings).

tthurgo · #4 (**permalink**) 03-19-2002, 06:38 AM

Quote:

Originally posted by Till
the infamous "spacer.gif"

If you had a copyright on "spacer.gif" today, you could probably make millions.

tthurgo · #5 (**permalink**) 03-19-2002, 06:43 AM

Quote:

Originally posted by Nate
(...)

Nate,

I copied and pasted your's into my browser (Netscape 4.7

) and it didn't work.

Tom

Nate · #6 (**permalink**) 03-19-2002, 07:54 PM

Yup, my fault...I had a typo (I mixed up the cellspacing and cellpadding value on the outter table - I still have problems remembering which is which). As usual, IE had no problems, but NS chokes. My original post is now correct.

Nate