table css

<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="697" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 35 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT><A HREF="id169.htm" TARGET="_top" TITLE="Table Firefox"><IMG SRC="3ab070e0.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="layered_tables.htm" TARGET="_top" TITLE="Layered Tables"><IMG SRC="3ad070e0.png" border=0 width="7" height="14" ALT="next" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A> <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" >   </FONT></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <STYLE type=text/css>#rollbutton a { color: #C0DCC0; font-size:13px; font-weight: bold; text-decoration: none; border:2px outset light gray; background-color:#680098; display: block; width: 85px; height: 22px; padding: 0px;}#rollbutton a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset light gray;}</STYLE><DIV id=rollbutton><DIV><A href="http://www.samisite.com" title="Go Back to Home Page" target="_top" onfocus="this.blur()"><center>HOME</center></A> </DIV></DIV></div> </NOBR></tD> </tR> </TABLE></div> <bR> <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><B>table css</B><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> <bR> <div> <B>Table test FIREFOX: Borders part 2</B></div> <bR> <div> <B>Put code into the HEAD section of page.  In CSB5, use Page Properties</B></div> <bR> <div> <IMG SRC="5fe22690.png" border=0 width="546" height="361" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> =======================================================================================</div> <bR> <div> <B>The table below is ALL HTML code that has been inserted into CSB with Insert> HTML</B></div> <div> <B>Code is added to the HEAD section and INSERT HTML to create this table.</B></div> <div> <B>And it show the same in Internet Explorer and Firefox. BUT it is not built by CSB.  </B></div> <bR> <div> <B> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table>  </B></div> <bR> <bR> <div> =========================================================================================</div> <bR> <div> <B>The following sample tries to work around CSB Table formatting by putting a table frame around a CSB table.</B></div> <div> <B>Trying for thick black border around a table set to hidden borders.  NOPE.</B></div> <div>  <iframe name="FRAME4" src="fftable4.htm" width="500" height="200" frameborder="0" ></iframe>  </div> <div> <B>Screen shot:  In Internet Explorer, you get an inset table.</B></div> <div> <B><IMG SRC="6157d060.png" border=0 width="637" height="262" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div> <B>Screen shot:  </B><B>In Firefox, you get only a LINE above the CSB table.</B></div> <div> <B><IMG SRC="6147da30.png" border=0 width="637" height="163" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <div> =========================================================================================</div> <bR> <bR> <bR> <bR> <bR> <div> <B>The following samples try to overwrite the CSB TABLE formatting by inserting style codes into HEAD section. </B></div> <div> <B>Does not work well.</B></div> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="897" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP ROWSPAN=3 HEIGHT= 170 ><NOBR><div> <B>SAMPLE 1 </B></div> <div> <IMG SRC="5f31b5d0.png" border=0 width="539" height="349" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> CODE USED in Head Section:</div> <bR> <div> <style></div> <div> table, td, th</div> <div> {</div> <div> border:1px solid green;</div> <div> }</div> <div> th</div> <div> {</div> <div> background-color:green;</div> <div> color:white;</div> <div> }</div> <div> </style></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <B>Screen shots:  </B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>Looks like this in CSB:</B></FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B><IMG SRC="5f4f7780.png" border=0 width="247" height="120" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <B>Looks like this in internet Explorer:</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="5f5348e0.png" border=0 width="308" height="142" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <B>Looks like this in FireFox:</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="5f2368f0.png" border=0 width="310" height="143" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <div>  <iframe name="FRAME1" src="fftable1.htm" width="500" height="200" frameborder="0" ></iframe>  </div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="897" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP ROWSPAN=3 HEIGHT= 171 WIDTH="556"><div> <B>SAMPLE 2</B></div> <div> <IMG SRC="5f71e5d0.png" border=0 width="542" height="349" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> CODE USED in Head section is same as secoabove. But CSB settings are different.</div> <bR> <div> <style></div> <div> table, td, th</div> <div> {</div> <div> border:1px solid green;</div> <div> }</div> <div> th</div> <div> {</div> <div> background-color:green;</div> <div> color:white;</div> <div> }</div> <div> </style></div> </tD> <tD VALIGN=TOP><NOBR><div> <B>Screen shots:  </B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>Looks like this in CSB:</B></FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B><IMG SRC="606f7790.png" border=0 width="247" height="121" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <B>Looks like this in internet Explorer:</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="5f634890.png" border=0 width="308" height="137" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <B>Looks like this in FireFox:</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="5f2368f0.png" border=0 width="310" height="143" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <div>  <iframe name="FRAME2" src="fftable2.htm" width="500" height="200" frameborder="0" ></iframe>  </div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="897" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP ROWSPAN=3 HEIGHT= 167 ><NOBR><div> <B>SAMPLE 3</B></div> <div> <IMG SRC="5f71e5d0.png" border=0 width="542" height="349" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> CODE USED in Head section is below.</div> <div> Also changed background of table in CSB to white.</div> <bR> <div> <style></div> <div> table, td, th</div> <div> {</div> <div> border:3px solid green;</div> <div> }</div> <div> th</div> <div> {</div> <div> background-color:green;</div> <div> color:white;</div> <div> }</div> <div> </style></div> <bR> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <B>Screen shots:  </B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>Looks like this in CSB:</B></FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B><IMG SRC="605fb750.png" border=0 width="251" height="117" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <B>Looks like this in internet Explorer:</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="60737990.png" border=0 width="311" height="153" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP><NOBR><div> <B>Looks like this in FireFox:</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="60836950.png" border=0 width="310" height="149" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <div>  <iframe name="FRAME3" src="fftable3.htm" width="500" height="200" frameborder="0" ></iframe>  </div> <bR> <bR> <bR> <bR> <bR> <bR> <bR> </td> </tr></table></body>