Table 2

<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="id25.htm" TARGET="_top" TITLE="Table 1"><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="id129.htm" TARGET="_top" TITLE="Table 3"><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><B>Table 2</B><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><A HREF="layered_tables.htm" TARGET="_top" TITLE="Layered Tables">Layered Tables</A><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> <bR> <div> <B>Table test 2: images and text </B><FONT SIZE="3" COLOR="#330066" FACE="Arial" ><B>(merged columns and rows)</B></FONT></div> <bR> <div> <B>The best way to display text and images on the same page?  Use a table!</B></div> <div> <B>By placing text and images in a table, they will stay lined up where you want them.  No more wandering images that squeeze your text!</B></div> <bR> <div> <B>MOST IMPORTANT:  MAKE SURE YOUR IMAGES ARE THE RIGHT SIZE!</B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B> </B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> </B></FONT></div> <div> <B>If they are wider or taller than the space provided (the cell area) then the final published table will </B></div> <div> <B>s    t    r    e    t    c    h  to fit the image. </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Best:  </B>use photo program to trim (crop) the photo or resize entire shot, then insert into CSB</div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Alternative: </B>insert the photo into CSB, right click to Image Properties to adjust size or crop </div> <div> <FONT SIZE="2" COLOR="#000000" FACE="Arial" >(this option makes your TLX file larger)</FONT><B>.  </B><I>Note re CSB4: </I><I>images can be resized, but not cropped.</I></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">To create a table, click your table button <IMG SRC="25917190.gif" border=0 width="23" height="25" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"> on the toolbar and define the size.</B></div> <div> The samples below are 3 rows by 3 columns.</div> <div> Need help with this?   KW has a tutorial that covers the absolute <A HREF="http://www.kwsupport.com/demo6/" TARGET="_blank" TITLE="http://www.kwsupport.com/demo6/">basics of building a table</A>.</div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Place an image into one cell.  Place text into another cell.  Simple.  Clean.  Easy!</B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Let the table cells align your text.  Don't use the SPACEBAR to push text!</B></div> <bR> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="654" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP COLSPAN=3 HEIGHT= 26 ><NOBR><div> <B>But it looks right on the design window!  What's wrong????</B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 195 WIDTH="352"><div> <B>First check your images again.</B></div> <bR> <div> When you click the image to select it, edit points appear around the image.  If all four sides have them, the image fits. These points allow you to stretch or shrink your image to fit.</div> <bR> <div> Compare these two photos.  The first one does not have edit points on the right side.  The column is too thin for the image.  When published, the table will stretch to hold the entire image.</div> <bR> <div> <B>Still not right?  It might be due to a </B><A HREF="#csberror" TITLE="Table 2"><B>known CSB error</B></A><B>!</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="26382920.gif" border=0 width="130" height="146" ALT="Image doesn't fit. Missing edit points on right side" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <B>this one is cut off</B></div> <div> <B>on the right side</B></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="26192920.gif" border=0 width="146" height="146" ALT="Image fits table fine. All four sides have edit points" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <B>this one fits - all four</B></div> <div> <B>sides have edit points</B></div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <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> <bR> <div> <B>Simple tables made better!</B></div> <bR> <bR> <div> <B>Simple Menu - uses a 2 column  4 row table:  </B></div> <div> <B> </B><FONT SIZE="1" COLOR="#000000" FACE="Arial" >The first column was highlighted then FORMAT > Paragraph > indent  0.1 so the words are indented </FONT></div> <div> <B> <TABLE BORDER="2" CELLPADDING="1" CELLSPACING="1" WIDTH="449" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" BGCOLOR=#FFFBF0 > <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Buffalo Wings...................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.95</I></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Onion Flower.....................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$5.60</I></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Mozzerella Sticks </I><FONT SIZE="1" COLOR="#000000" FACE="Arial" ><I> .......................................</I></FONT><I>..............................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.25</I></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Clam Strips.......................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$3.80</I></div> </tD> </tR> </TABLE></B></div> <bR> <div> <B>Same menu, with inside borders invisible:</B></div> <div> <TABLE BORDER="2" CELLPADDING="1" CELLSPACING="1" WIDTH="447" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" BGCOLOR=#FFFBF0 > <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Buffalo Wings...................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.95</I></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Onion Flower....................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$5.60</I></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Mozzerella Sticks ...........................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.25</I></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 ><NOBR><div> <I>Clam Strips......................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$3.80</I></div> </tD> </tR> </TABLE></div> <bR> <div> <B>Same menu, inserted new column - uses a 3 column  4 row table:  </B></div> <div> The rows in the first column were <A HREF="#merge" TITLE="Table 2">merged</A> so an image could be added for interest!<FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> </B></FONT></div> <div> <TABLE BORDER="2" CELLPADDING="1" CELLSPACING="1" WIDTH="559" BORDERCOLORLIGHT="#CC3300" BORDERCOLORDARK="#CC3300" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" BGCOLOR=#FFFBF0 > <tR> <tD VALIGN=CENTER ROWSPAN=4 HEIGHT= 19 ><NOBR><div> <I><IMG SRC="3b35a410.gif" border=0 width="90" height="65" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></I></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <I>Buffalo Wings.................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.95</I></div> </tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <I>Onion Flower...................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$5.60</I></div> </tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <I>Mozzerella Sticks ..........................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.25</I></div> </tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <I>Clam Strips.....................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$3.80</I></div> </tD> </tR> </TABLE></div> <bR> <div> <B>Same menu - table inside of table for additional flare!</B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="589" BORDERCOLORLIGHT="#990000" BORDERCOLORDARK="#990000" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#CC9900 HEIGHT= 121 ><NOBR><bR> <div> <TABLE BORDER="2" CELLPADDING="1" CELLSPACING="1" WIDTH="559" BORDERCOLORLIGHT="#CC3300" BORDERCOLORDARK="#CC3300" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" BGCOLOR=#FFFBF0 > <tR> <tD VALIGN=CENTER ROWSPAN=4 HEIGHT= 19 ><NOBR><div> <I><IMG SRC="3b35a410.gif" border=0 width="90" height="65" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></I></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <I>Buffalo Wings..................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.95</I></div> </tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <I>Onion Flower....................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$5.60</I></div> </tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <I>Mozzerella Sticks</I><FONT SIZE="1" COLOR="#000000" FACE="Arial" ><I> </I></FONT><I>...........................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$4.25</I></div> </tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <I>Clam Strips......................................................................</I></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="53"><div> <I>$3.80</I></div> </tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> </TABLE></B></div> <bR> <bR> <div> <B> <A NAME="merge"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B>MERGE CELLS to create larger areas and more interesting presentation!</B></div> <bR> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">OVERLAP</B></FONT><B> TWO COLUMNS:</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>  If you want an image to overlap two columns in a table, merge to cells into a larger one:  </B></FONT><B>highlight the cells> right click > merge cells.</B><B> </B></div> <div> For emphasis in the table, I chose to make the background of the merged cells contrasting, but the merged cells can remain the same color as the rest.</div> <bR> <div> Insert the image into the larger cell and choose the justification left center or right to move the image to the best position for your situation.  The image will no longer be directly under one column.</div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">OVERLAP</B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B> TWO ROWS:</B></FONT><B> </B><B>The same thing can be done merging cells on two rows in a table to keep an image lined up with corresponding text.  </B><B>If you want an image to overlap two rows in a table, merge to cells into a larger one:</B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>  </B><B>highlight the cells> right click > merge cells.</B><B> </B></FONT></div> <bR> <div> Insert the image into the larger cell and choose the justification left center or right to move the image to the best position for your situation.  The image will no longer be directly on one row.</div> <bR> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="503" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 41 ><NOBR><div> <B>3 SAMPLES!  Merging to create larger areas!</B></div> <div> <B>The third shows a </B><FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>CSB4 error</B></FONT><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B> </B></FONT><B>and how to deal with it!</B></div> </NOBR></tD> </tR> </TABLE></B></div> <bR> <bR> <div> <B>1st table:  Merging both ROWS and COLUMNS </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">The</B><FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B> </B></FONT><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>first table is shown twice</B></FONT><B> </B>(except: bottom row was removed from the second table)<B>. </B></div> <div> <B>A.  First it is shown with the borders for reference, </B></div> <div> <B>B.  Scroll down to see how it would appear with hidden borders.</B></div> <div> Published table is as designed.</div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>1 A with borders showing</B></div> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="655" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 196 WIDTH="213"><div> The image shown to the right dkfajdsfjlddlflsf slkdfladsjfljdjdljdsfjljdsfljdsfjlfjdljdsflsdfljvxt text text text text text text text text text text text text text text text text text text text </div> </tD> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#FFFFFF WIDTH="419"><div> <B>merged cells across 2 columns</B></div> <div> with centered image</div> <bR> <div> <IMG SRC="0b6aa800.jpg" border=0 width="170" height="128" ALT="curb house 1" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> </tR> <tR> <tD VALIGN=TOP ROWSPAN=2 BGCOLOR=#FFFFFF HEIGHT= 99 ><NOBR><div> <B>merged cells across 2 rows</B></div> <div> with left justified image</div> <div> <IMG SRC="0b790900.jpg" border=0 width="144" height="144" ALT="sw-soldier curb shot" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <B>row</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > texttext text text text text</FONT></div> <div> text text </div> </NOBR></tD> <tD VALIGN=TOP WIDTH="197"><div> text text text text text text text text text text text text text text </div> </tD> </tR> <tR> <tD VALIGN=TOP WIDTH="219"><div> <B>row</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > text text text </FONT></div> </tD> <tD VALIGN=TOP><NOBR><div> text text text text text text text </div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 WIDTH="213"><div> 1</div> </tD> <tD VALIGN=TOP WIDTH="219"><div> 2</div> </tD> <tD VALIGN=TOP WIDTH="197"><div> 3</div> </tD> </tR> </TABLE></B></div> <bR> <bR> <bR> <div> <B>1 B </B><B>with invisible borders</B></div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="645" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 196 WIDTH="213"><div> The image shown to the right dkfajdsfjlddlflsf slkdfladsjfljdjdljdsfjljdsfljdsfjlfjdljdsflsdfljvxt text text text text text text text text text text text text text text text text text text text </div> </tD> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#FFFFFF WIDTH="419"><div> <B>merged cells across 2 columns</B></div> <div> with centered image</div> <bR> <div> <IMG SRC="0b6aa800.jpg" border=0 width="170" height="128" ALT="curb house 1" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> </tR> <tR> <tD VALIGN=TOP ROWSPAN=2 BGCOLOR=#FFFFFF HEIGHT= 99 ><NOBR><div> <B>merged cells across 2 rows</B></div> <div> with left justified image</div> <div> <IMG SRC="0b790900.jpg" border=0 width="144" height="144" ALT="sw-soldier curb shot" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <B>row</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > texttext text text text text</FONT></div> <div> text text </div> </NOBR></tD> <tD VALIGN=TOP WIDTH="197"><div> text text text text text text text text text text text text text text </div> </tD> </tR> <tR> <tD VALIGN=TOP WIDTH="219"><div> <B>row</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > text text text </FONT></div> </tD> <tD VALIGN=TOP><NOBR><div> text text text text text text text </div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <bR> <bR> <div> <B>2nd table: Merging ROWS only</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Merges rows (vertical), no columns merged (horizontal)  </B></div> <div> Published table is as designed.</div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="671" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP ROWSPAN=2 BGCOLOR=#FFFFFF HEIGHT= 99 ><NOBR><div> <B>merged cells across 2 rows</B></div> <div> with left justified image</div> <div> <IMG SRC="0b790900.jpg" border=0 width="144" height="144" ALT="sw-soldier curb shot" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <B>row</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > texttext text text text text</FONT></div> <div> text text </div> </NOBR></tD> <tD VALIGN=TOP ROWSPAN=2 BGCOLOR=#FFFFFF WIDTH="213"><div> <B>merged cells across 2 rows</B></div> <DIV ALIGN="LEFT"></DIV> <div> with center justified image<FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT><FONT SIZE="3" COLOR="#990000" FACE="Arial" ><IMG SRC="0b6aa800.jpg" border=0 width="170" height="128" ALT="curb house 1" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></FONT></div> </tD> </tR> <tR> <tD VALIGN=TOP WIDTH="219"><div> <B>row</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > text text text </FONT></div> </tD> </tR> </TABLE></div> <bR> <bR> <div> <B> <A NAME="csberror"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B>3rd table: Merging COLUMNS only</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Merges across columns (horizontal), no row merges (vertical)</B></div> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>A.  This is how CSB created the table  </B></FONT><B>- </B><B>CSB4 error!!!  Cells expand incorrectly!</B></div> <div> <B>B.  This is an inserted image of how it was designed.</B></div> <div> <B>C.  This is the same table A, with an extra unmerged row. </B></div> <div> <B>Even with the extra row, it does not hold the true shape of the design.</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>3 A - </B><FONT SIZE="5" COLOR="#990000" FACE="Arial" ><B>CSB error - too wide.</B></FONT></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="655" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 153 WIDTH="213"><div> The image shown to the right </div> <bR> <div> dkfajdsfjlddlflsf slkdfladsjfljdjdljdsfjljdsfljdsfjlfjdljdsflsdfljvxt text text text text text text text text text text text text text text text text text text text </div> </tD> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#FFFFFF><NOBR><div> <B>merged cells  across 2 columns with centered image</B></div> <div> <IMG SRC="0b6aa800.jpg" border=0 width="170" height="128" ALT="curb house 1" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=3 BGCOLOR=#FFFFFF HEIGHT= 21 WIDTH="635"><div> the full table width merged</div> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#FFFFFF HEIGHT= 169 ><NOBR><div> merged cells across 2 columns with center justified image</div> <div> <IMG SRC="0b790900.jpg" border=0 width="144" height="144" ALT="sw-soldier curb shot" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="197"><div> text text text text text text text text text text text text text text </div> </tD> </tR> </TABLE></div> <bR> <bR> <div> <B>3 B -  DESIGN IMAGE</B><FONT SIZE="5" COLOR="#990000" FACE="Arial" ><B> </B></FONT><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>(should be like this!)</B></FONT></div> <div> <B><IMG SRC="1a892750.jpg" border=0 width="658" height="373" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <div> <B> </B><FONT SIZE="5" COLOR="#6600CC" FACE="Arial" ><B>3 C - with extra row</B></FONT><B>  </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>(helps hold shape, but does not solve problem)</B></FONT></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="655" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 153 WIDTH="213"><div> The image shown to the right </div> <bR> <div> dkfajdsfjlddlflsf slkdfladsjfljdjdljdsfjljdsfljdsfjlfjdljdsflsdfljvxt text text text text text text text text text text text text text text text text text text text </div> </tD> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#FFFFFF><NOBR><div> <B>merged cells  across 2 columns with centered image</B></div> <div> <IMG SRC="0b6aa800.jpg" border=0 width="170" height="128" ALT="curb house 1" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=3 BGCOLOR=#FFFFFF HEIGHT= 21 WIDTH="635"><div> the full table width merged</div> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#FFFFFF HEIGHT= 169 ><NOBR><div> <B>merged cells across 2 columns with center justified image</B></div> <div> <IMG SRC="0b790900.jpg" border=0 width="144" height="144" ALT="sw-soldier curb shot" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="197"><div> text text text text text text text text text text text text text text </div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 19 WIDTH="213"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="19" ALIGN="bottom" WIDTH="213" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP WIDTH="219"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="19" ALIGN="bottom" WIDTH="219" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP WIDTH="197"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="19" ALIGN="bottom" WIDTH="197" HSPACE="0" VSPACE="0"></tD> </tR> </TABLE></div> <bR> <bR> <div> <B> </B><FONT SIZE="5" COLOR="#6600CC" FACE="Arial" ><B>3 D - small tables inside a larger one</B></FONT></div> <div> <B>(alternative to merging columns)</B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="693" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER BGCOLOR=#9999CC HEIGHT= 424 WIDTH="681"><div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="421" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="RIGHT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 170 ><NOBR><div> <B>1. Single column table location set to LEFT for text</B></div> <div> <IMG SRC="0b6aa800.jpg" border=0 width="170" height="128" ALT="curb house 1" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <B>A single column, single row table holds three smaller tables.</B></div> <bR> <div> The table shown to the right </div> <div> looks like  it has two merged columns but it is really only one wide column.   </div> <div> This is text to the left.</div> <bR> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="681" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 20 WIDTH="675"><div> <B>2. single table full width of larger table</B></div> </tD> </tR> </TABLE></div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="416" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 178 ><NOBR><div> <B>3. Put smaller tables inside a large table</B></div> <div> <IMG SRC="0b6aa800.jpg" border=0 width="170" height="128" ALT="curb house 1" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> The table shown to the right </div> <div> looks like  it has two merged columns but it is really only one wide column.</div> <div> This is text to the right.</div> <div> This table is set for location right.</div> </tD> </tR> </TABLE></div> <bR> <bR> <bR> <div> <B> <A NAME="overlap"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>Overlapping images are made in separate photo editing software</B></FONT></div> <div> <A HREF="http://www.samisite.com/photo/id129.htm" TARGET="_top" TITLE="http://www.samisite.com/photo/id129.htm"><B>read more here</B></A><B>.</B></div> <bR> <div> <A HREF="id36_m.htm" TITLE="Table 2"><B>TOP of page</B></A></div> </td> </tr></table></body>