MSN Home  |  My MSN  |  Hotmail
Sign in to Windows Live ID Web Search:   
go to MSNGroups 
Groups Home  |  My Groups  |  Language  |  Help  
 
Web DesignDeemed especially "cool" by MSN.WebDesign@groups.msn.com 
  
What's New
  Join Now
  Homepage  
  Rules - Simple  
  Nickel Tour  
  How_to_Ask_for_Help  
  Message Boards  
  Member Promos  
  Newbie Central  
  Tutorials etc.  
  Basic Security  
  Hot Tips  
  FP - HTML Editors  
  Good Design  
  Help Groups  
  Free*Stuff Links  
  Templates  
  Handy Helpers  
  Pictures  
  Documents  
  Member Assist  
  Scrabble Board  
  Sample Jukebox  
  Nested Tables  
  Homepg Workshop  
  
  
  Tools  
 

Changing values for borders, padding, spacing and adding table backgrounds and cell backgrounds gives varying effects:

  • Vary the width and color of the border gives you one "layer" (width: BORDER="?") (color:  BORDERCOLOR="#??????")
  • Vary the cell padding width (TABLE cellPadding="?") and coloring the cell (TD bgColor'"#?????? )
  • Vary the cell spacing width (TABLE cellSpacing="?") and using a table background graphic (TABLE BACKGROUND="HTTP://whatever..." or table background color (BGCOLOR="#??????")

Then nesting these tables, one inside the other, get you even more interesting effects.

1.
2.
3.
4. Page content in here 

 

I've put one paragraph break into the top of each of the 4 tables Dondie used to get this effect and numbered each table.

  1. The outer table has the automatic (no color) border on it set to 3 and cell padding of 10 and cell spacing of 10.  It has the animated bg in it.  This border gives the look of one "layer"
    • The cell spacing of 10 allows 10 pixels of the animated bg to show around the outside of the table 1 - and gives the look of a 2nd layer
    • Since it is one big cell, the cell itself has been colored to the darker purple.  The cell padding allows 10 pixels of the darker purple to show around table 2.  This gives the look of a 3rd layer.
< TABLE cellSpacing="10" cellPadding="10" WIDTH="100%" BORDER="3"
BACKGROUND=
"http://groups.msn.com/isapi/fetch.dll?action=MyPhotos_GetPubPhoto&PhotoID=nFQAAAB8G6zKhRJTLsy4NQ9dEm*5cOAeVWAx45Kj9C!W5mOtlaxIuLA">
< TBODY>
< TR>
< TD bgColor="#947e93">
  1. Table 2 has the no-color border of 3 again, zero for cell padding and 10 for cell spacing, and a pale purple solid color background graphic, so it provides a look of having 2 layers.
< TABLE cellSpacing="10" cellPadding="0" WIDTH="100%"BORDER="3"
BACKGROUND=
"http://groups.msn.com/isapi/fetch.dll?action=MyPhotos_GetPubPhoto&PhotoID=nFQAAAL4F9y01Ux0XU2P!EkKhB6EEemkJLLyFxDlUs*YToZvejD6VKg">
< TBODY>
< TR>
< TD>
  1. Table 3 is the same as table 1

  2. Table 4 the same as table 2, but has zero border width.
Notice: Microsoft has no responsibility for the content featured in this group. Click here for more info.
  Try MSN Internet Software for FREE!
    MSN Home  |  My MSN  |  Hotmail  |  Search
Feedback  |  Help  
  ©2005 Microsoft Corporation. All rights reserved.  Legal  Advertise  MSN Privacy