Preserved Topic: How to design this table effect? Please help? (Page 1 of 1)

Hi I would like some help from some HTML god who can tell me how the light blue edges around the entire dark blue table was drawn on this web site? :

http://zdnet.com.com/2001-1105-0.html

any help would be greatly appreciated.

well, that's not exactly pure html, it's CSS:

<table style="border: 1px solid #000000; background-color: #cccccc;">
...
</table>

That would appear as a table with a gray background (RGB-color #cccccc) and a black 1 pixel border (#000000). To get a dark blue background and a light blue border you only have to change those rgb values.

Hi and thx for the reply. Yes that is a way to do just that effect. However if I take out the css stylesheet then the border still remains. I think they are using 1pixel wide blank gif enclosed within TD with diff. background. The prob I cannot understand is how they have td running around the entire table...?

Any guesses? Thx again!

Yes, you can achieve a similar effect without css:

<table bgcolor="#000000" cellpadding="1">

  <tr>

    <td>

      <table bgcolor="#cccccc">

        <tr>

          <td>

            Here goes the actual content of the table

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

That's one table inside another, a 'nested table'. Because of the cellpadding="1" we only see 1px of the outer table's background.

Or did you want to know something completely different?

If you want more control over the border, you can always make a table with nine cells, put a corner image in each corner, a repeatable side image as the background for the edge cells, and put your content in the center cell.

<table width="100" border="0" cellspacing="0" cellpadding="0" bgcolor="#828A92">

	<tr>

		<td width="100">

<table border="0" cellspacing="0" cellpadding="0" width="100">

	<tr>

		<td width="100%" align="center"><B>HEADER</B></FONT></TD>

	</tr>

	<tr>

		<td width="100%" align="center" valign="middle" bgcolor="#D9E6F4">

<table width="100%" border="0" cellspacing="0" cellpadding="5">

	<tr>

		<td>TEXT

	</tr>

</table>

		</td>

	</tr>

</table>

		</td>

	</tr>

</table>

Nested tables are your friend

Later,
C:\


~Binary is best~

Nested tables? Yikes!

They may be ugly, but that's the only way to achieve that effect in NN4...

Ugly and DAMN can they get confusing!

Later,
C:\


~Binary is best~

Did someone mention a border that works in NN4 and everything else?
http://www.bugimus.com/gurus/tableborder1.html

I know that if Emperor reads this, we're all in big trouble

*If* you need it to work in NN4 then this is the way but if you're trying to move on to CSS you should get away from using tables this way.

~sheds a quiet tear at the sheer number of nested tables on display on this table~

If it really has to be done then go with Bug and kuckus' methods - I've used them to achieve the effect (I stole the code from Amazon too) I just had to say a lot of Hail Marys and sacrifice a goat at full moon to stop the Dark Gods from taking my soul - and they surely will (my research has shown that more than 4 nested tables will alter the fabric of time and space and there are unspeakable things waiting on the other side so be warned).

Emps

Ha! Emperor.. I have used ...many...5 or more ..nested tables on pages on my site..skyetyger.com.. but I prefer CSS now..anyone is free to study/copy the code on my site..if you like tables..the fabric of whatever is still intact..I think..??? checking..

http://www.skyetyger.com/list.html


This page has borders around tables and tables around borders..if it helps at all

too many too many too many nested tables

Never more than 3 deep

never ever ever.

NN4 render's them too damn slow.

I had to at one point redo 1200 lines of HTML to kill a few layers and remove a crapload of 1pxel gif's for a site because the outside design firm gave us a page that was 80K of JUST HTML. (a decent site should be 120K or under for the peeps still using dialup)

I was able to strip about 20-30K in HTML and get it to only 3 deep nested with only some slight degradation in older browsers by using more CSS.



.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................

Every table, border or sliced image on my site can be done simply and easily in CSS. I have not switched the pages to CSS..too lazy but I no longer use tables.. and as the browsers become more compliant and the computers upgraded it will be much easier to do cross browser CSS pages