Resort Table

<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="layered_tables.htm" TARGET="_top" TITLE="Layered Tables"><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="id115.htm" TARGET="_top" TITLE="Background Image in 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><A HREF="layered_tables.htm" TARGET="_top" TITLE="Layered Tables">Layered Tables</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><B>Resort Table</B><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: Resort your columns</B></div> <bR> <div> <B>CSB can not do this as a built in feature.  However,  </B><A HREF="http://simplythebest.net/scripts/DHTML_scripts/javascripts/javascript_117.html" TARGET="_blank" TITLE="http://simplythebest.net/scripts/DHTML_s"><B>Simplythebest.net</B></A><B> offers a very interesting script that does it.</B></div> <div> <B>(Thanks Rick for pointing us to it!)</B></div> <bR> <div> The table below is taken directly from their website and posted here.  Below are MODIFIED instructions for the implementation of this script for use specifically in CSB/Trellix.</div> <div> <B></B></div> <div> <B></B></div> <bR> <bR> <div> <IMG BORDER="0" SRC="Symb075c00b700f066003300.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">First, click the link above to open a new window to the Simplythebest.net site page with the script. </div> <bR> <div> <IMG BORDER="0" SRC="Symb075c00b700f066003300.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Open an HTML editor program.  If you do not have one, then open your <FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>NOTEPAD</B></FONT> program (Start, Programs, Accessories, Notepad) so you will be able to modify the code to build a table that fits your needs.</div> <bR> <div> <B> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="790" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 493 WIDTH="25"><div> <B>1)</B></div> </tD> <tD VALIGN=TOP WIDTH="754"><div> <B>Click the SELECT CODE button for number 1 on their website.  </B>Press <FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>CTRL C</B></FONT> to copy the script.  Having the editor/Notepad screen open, press <FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>CTRL V</B></FONT> to paste the code.  </div> <bR> <div> <B>Now edit the code</B> (change colors, columns and rows) <B>based on the instructions they offer in step 4. </B> The items shown in bolded <FONT SIZE="3" COLOR="#000099" FACE="Arial" ><B>BLUE</B></FONT> color in their step 4 can be changed by you to suit your site.</div> <div> Assign your column headers, and any instructions you want to offer.  </div> <bR> <div> Then set up your rows.  Each row is given its own <FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>number</B></FONT> and each column data is separated with a comma. </div> <div> <FONT SIZE="3" COLOR="#330066" FACE="Arial" >This is the format: </FONT><FONT SIZE="2" COLOR="#330066" FACE="Arial" > </FONT>tableData[<FONT SIZE="2" COLOR="#000099" FACE="Arial" ><B>3</B></FONT>]=new dataArray('<FONT SIZE="2" COLOR="#000099" FACE="Arial" ><B>column 1 info</B></FONT>','<FONT SIZE="2" COLOR="#000099" FACE="Arial" ><B>column 2 info</B></FONT>','<FONT SIZE="2" COLOR="#000099" FACE="Arial" ><B>column 3 info</B></FONT>','<FONT SIZE="2" COLOR="#000099" FACE="Arial" ><B>column 4 info</B></FONT>');</div> <bR> <div> tableData[<B>0</B>]=new dataArray('<B>SimplytheBest.net</B>','<B>http://simplythebest.net</B>','<B>email@simplythebest.net</B>','<B>Simply the Best Scripts</B>');</div> <div> tableData[<B>1</B>]=new dataArray('<B>PlanMagic.com</B>','<B>http://planmagic.com</B>','<B>mail@planmagic.com</B>','<B>Business planning software</B>');</div> <bR> <div> <B>The first line of the code you pasted looks like this:</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> </B></FONT></div> <div> <script language="JavaScript" src="jscript117/sortable_table.js"></script></div> <bR> <div> <B>You must change the code for CSB or Trellix.  Make it look like this instead:</B></div> <div> <script language="JavaScript" src="<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>^GEMDIR/</B></FONT>sortable_table.js"></script></div> <bR> <div> (Their instruction says this part of the code must go into the HEAD of the HTML code. Since neither CSB nor Trellix will allow you to do that, the table above shows that you can place this code someplace else and have it work just fine. )<B> </B></div> <bR> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 976 WIDTH="25"><div> <B>2)</B></div> </tD> <tD VALIGN=TOP WIDTH="754"><div> <B>Download the </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>sortable_table.js</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> </B></FONT><B>file from their site.  </B>(It is in a zipped file and you will need to open it to get to the .js file inside)</div> <bR> <div> <B>Place your cursor at the VERY TOP of your web page.  </B></div> <div> <B>Choose INSERT HTML in CSB </B>(or Build your own webgem in Trellix).  </div> <bR> <div> <B>Paste your modified code from step 1 into the WHITE BOX.</B></div> <div> <B><IMG SRC="539503d0.gif" border=0 width="336" height="317" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">    </B></div> <bR> <div> <B>Then choose the Files for this Components button below the white box (second red arrow in image).</B></div> <div> <B><IMG SRC="53812650.gif" border=0 width="274" height="357" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div> <B>Click the Add a file button and select the sortable_table.js file you downloaded.  Do not choose the ZIP file!  It must be the file inside the zip file!  </B></div> <div> <B>Choose OK, then Choose Insert.</B></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 210 WIDTH="25"><div> <B>3)</B></div> </tD> <tD VALIGN=TOP WIDTH="754"><div> <B>Move your cursor to the place on your web page that you want to have the table.</B></div> <div> <B>Choose INSERT HTML in CSB </B>(or Build your own webgem in Trellix).  </div> <bR> <div> <B>Click the SELECT CODE button for number 3 on their website.  Press </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>CTRL C</B></FONT><B> to copy the script.  </B></div> <bR> <div> <B>Paste code from step 3 into the WHITE BOX.  This code does NOT need to be modified.  You can use the PASTE button or press </B><FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>CTRL V</B></FONT><B> to paste the code.  </B></div> <bR> <div> <B>Choose Insert. </B></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 20 WIDTH="780"><div> <B>Publish the file. </B></div> </tD> </tR> </TABLE></B></div> <div> <B> </B></div> </td> </tr></table></body>