Layered Tables

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="725" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 33 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="71"><div> <A HREF="table_css.htm" TARGET="_top" TITLE="table css"><IMG SRC="588070e0.png" border=0 width="7" height="14" ALT="previous" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="14">  <A HREF="resorttable.htm" TARGET="_top" TITLE="Resort Table"><IMG SRC="58a070e0.png" border=0 width="7" height="14" ALT="next" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </tD> <tD VALIGN=CENTER><NOBR><div> <DIV style="TEXT-ALIGN: center"> <STYLE type=text/css> #rollbutton a { color: #C0DCC0; font-size:12px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 85px; height: 19px; padding: 0px; } #rollbutton a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton> <A href="http://www.samisite.com" title="Samisite.com Home Page" target="_top" onfocus="this.blur()">HOME</A> <A href="http://www.forum.samisite.com" title="Visit the Samisite Webmaster Community Forum" target="_top" onfocus="this.blur()">FORUM</A></DIV> </DIV></div> </NOBR></tD> </tR> </TABLE></div> <div> </div> </td> </tr><tr> <td valign="top" height=430 BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <STYLE>  </STYLE><A HREF="index.htm" TARGET="_top" TITLE="Test Index">Test Index</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id25.htm" TARGET="_top" TITLE="Table 1">Table 1</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id36.htm" TARGET="_top" TITLE="Table 2">Table 2</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id129.htm" TARGET="_top" TITLE="Table 3">Table 3</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id99.htm" TARGET="_top" TITLE="Table 4">Table 4</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id133.htm" TARGET="_top" TITLE="Table 5">Table 5</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id169.htm" TARGET="_top" TITLE="Table Firefox">Table Firefox</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="table_css.htm" TARGET="_top" TITLE="table css">table css</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><B>Layered Tables</B><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="resorttable.htm" TARGET="_top" TITLE="Resort Table">Resort Table</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id115.htm" TARGET="_top" TITLE="Background Image in Table">Background Image in Table</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="selectionguides.htm" TARGET="_top" TITLE="Selection Guides">Selection Guides</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id28.htm" TARGET="_top" TITLE="Folding Menu Tree">Folding Menu Tree</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id95.htm" TARGET="_top" TITLE="Menu Buttons">Menu Buttons</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id47.htm" TARGET="_top" TITLE="Hidden Site Map">Hidden Site Map</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id137.htm" TARGET="_top" TITLE="Anchors">Anchors</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id55.htm" TARGET="_top" TITLE="Double Border Detail">Double Border Detail</A></div> <bR> <div> <B>Table 6: Layered Tables</B></div> <bR> <div> <B>If you want to get away from the top and left borders that many sites use for design, consider TABLES.</B></div> <div> <B>Tables can hold many things, text, images, flash, iframes and keep the shape YOU INTEND even when the window size changes.</B></div> <bR> <div> <B>I have been asked how I created my home page design.</B></div> <div> <B>The 3 column design is done using a series of TABLES.</B></div> <bR> <div> The two iframes below will demonstrate the construction technique.  </div> <div> Scroll up and down to see the whole page, like normal and with all the tables showing.</div> <bR> <div> <B>IFRAME 1:  This is the way my site looks normally (as of 02-29-08).</B></div> <div> <B> <iframe name="FRAME1" src="HTMLobj-1456/tables_50.jpg" width="530" height="220" frameborder="1" ></iframe>  </B></div> <bR> <div> <FONT SIZE="3" COLOR="#330066" FACE="Arial" ><B>IFRAME2:  </B></FONT><B>This is the way my site looks when I force </B><B>all tables to have a RED border.</B><B> </B><FONT SIZE="3" COLOR="#330066" FACE="Arial" ><B> </B></FONT></div> <div> <B>Now you see the same page, with all the construction showing plainly.</B></div> <div> <B> <iframe name="FRAME1" src="HTMLobj-1457/tablelines_50.jpg" width="530" height="220" frameborder="1" ></iframe>  </B></div> <bR> <div> <A HREF="http://www.samisite.com/backgrounds/nfborder/id55.htm" TARGET="_blank" TITLE="http://www.samisite.com/backgrounds/nfbo"><B>Turn off your borders.  You need a plain page.</B></A><B> </B></div> <div> <B>As you will see, I have a ONE ROW table on the top that holds my LOGO, search and Welcome.</B></div> <bR> <div> <B>Then below that, I have a 3 column table.  This table holds many other tables!</B></div> <div> <B>I have several smaller tables inside the large 3 column table.  </B></div> <div> Some of those tables have the borders turned on to make horizontal lines that separate sections.</div> <div> Some tables hold text.  Some hold buttons, some hold images and text, and even have 2 iframes on the right side.</div> <bR> <div> I really like the 3 column table idea and using smaller tables inside the big table lets you expand or adjust your content without causing a lot of problems.  But remember that you will have space BETWEEN the inner table and the outer table.  Use it to hold more text or image because you can not get rid of it.</div> <bR> <div> <B>My home page is CENTERED. (Highlight all tables at one time and click CENTERED on the toolbar).</B></div> <div> The tables are set to PIXEL settings.  The size of the table will not change even when the size of the window does.  </div> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="577" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" BGCOLOR=#FFFFFF > <tR> <tD VALIGN=TOP HEIGHT= 100 WIDTH="405"><div> <B>TIP: </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>Don't turn off your table borders.  They show in FireFox and other browsers.   Make them invisible!</B></FONT></div> <bR> <div> <B>Right click Table  choose Properties  > Table</B></div> <div> <B>Hide the table borders using the dotted lines.</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="2218b5f0.png" border=0 width="139" height="95" ALT="table borders hidden" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> If you have CSB 5, you can set your tables to STRETCH to fit the window.  <A HREF="http://www.samisite.com/csb5demo/tables.htm" TARGET="_top" TITLE="http://www.samisite.com/csb5demo/tables.">Read more about that here</A>.</div> <bR> <div> By the way.  Do not overload your pages!  My home page has too many animations, too long, too many links, too many images, takes too long to load.  DO NOT do that on your site!</div> <bR> <div> <B>Experiment and have fun!</B></div> <bR> <div> Some other examples of this TABLE layout:</div> <div> <IMG SRC="5b2e66d0.jpg" border=0 width="486" height="365" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> (TPACC was using CSB when this image was made. The site now uses other software.</div> <bR> <div> This one uses a BACKGROUND picture BEHIND A VERY LARGE TABLE.</div> <div> There is no TOP or LEFT border turned on in CSB.</div> <div> That is just a PICTURE that LOOKS like borders with an invisible table over it!</div> <div> <IMG SRC="5b4e66d0.jpg" border=0 width="486" height="365" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <bR> </td> </tr></table></body>