I'm working with this web page code (below) and I'd like to seperate the two cells (or tables, I'm not sure). The one on the left holds the log-in and the links, and the one on the right contains the main text. I've attached an image and am showing the borders just to show you where the cells are. I'd like to seperate these two and run a vertical line between them. Can you help me with this? <HTML> <HEAD> <Title></Title> <style type="text/css"> body {margin: 1px 100px; 0px 100px; padding: 1px;} </style> </HEAD> <BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"> <TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0> <TR valign=middle height=10> <TD class=headera1><IMG src="/images/clear.gif" height=1 width=159 border=0></TD> <TD width="100%" align=right class=headera2> </TD> </TR> <TR> <TD class=headera3><IMG src="/images/clear.gif" height=1 width=159 border=0></TD> <TD width="100%" align=right class=headera4> </TD> </tr> <TR valign=top> <TD><!--<IMG src="/smusermanager/images/logo1.gif" height=150 width=159 border=0>--></TD> <TD valign=left width=795 height=1><IMG src="/images/topimg.jpg"> <IMG src="/images/topimg.jpg"></font></TD> </TR> <TR valign=top height=1> <TD colspan=2 class=black><IMG src="/images/clear.gif" height=1 width=100% border=0></TD> </TR> </TABLE> <TABLE cellSpacing=0 valign=top cellPadding=0 height=100% width=100% border=0> <TR valign=top> <TD width=10%> <TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0> <TR valign=middle> <TD valign=middle class=lightgrey><IMG src="/images/clear.gif" height=20 width=160 align=absmiddle></TD> </TR> <TR valign=top height=2> <TD><IMG src="/images/clear.gif" height=2 width=160 border=0></TD> </TR> </TABLE> <TABLE cellSpacing=0 cellPadding=0 width=100% border=1> <TR> <TD><font class=tbody> <form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp"> <table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr> <tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr> <tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr> </td></tr></table></td></tr></table></td></tr></table></form> <div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"><a href="?action=login"> Home</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register"> Register</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphon.gif">--><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> FAQ</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Terms Of Use</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;"> <a href="?action=forgotusername"> Contact Us</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphon.gif" style="vertical-align: middle;"><a href="?action=forgotpass"> Forgot Password</a><br><br> <IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font></div> </font> </TD> </TR> </TABLE> </TD> <TD width="1" height=100% background="/smusermanager/images/dot.gif"> <TABLE cellSpacing=0 valign=top cellPadding=0 width=1 border=0> <TR valign=middle> <TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD> </TR> <TR valign=top height=2> <TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD> </TR> <TR valign=top height=3> <TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=1 border=0></TD> </TR> </TABLE> </TD> <TD width=100%> <TABLE cellSpacing=0 cellPadding=0 width=100% border=0> <TR valign=middle> <TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD> </TR> <TR valign=top height=2> <TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD> </TR> <TR valign=top height=3> <TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=11 border=0></TD> </TR> <TR> <TD valign=top><font class=tbody> <style> .fieldbox { BACKGROUND: #ffffff; BORDER-BOTTOM: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; COLOR: #333333; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 13px } .colorwhite { BACKGROUND-COLOR: white } .colorblack { BACKGROUND-COLOR: black } .colortopbar { BACKGROUND-COLOR: #999966 } .colormenubar { BACKGROUND-COLOR: #999966 } .colormenufields { BACKGROUND-COLOR: #cccc99 } .colorformborder { BACKGROUND-COLOR: #ffffff } .colorformheader { BACKGROUND-COLOR: #A30100 } .colorformfields { BACKGROUND-COLOR: #ffffff } .colorformfieldsalt { BACKGROUND-COLOR: #ffffff } .colorformresponse { BACKGROUND-COLOR: white } .textsize16 A { COLOR: navy; FONT-FAMILY: Verdana, Arial, helvetica; FONT-SIZE: 16pt; TEXT-DECORATION: none } .textsize16 A:active { COLOR: navy; FONT-FAMILY: verdana, arial, helvetica; FONT-SIZE: 16pt } .textsize16 A:hover { COLOR: navy; FONT-FAMILY: verdana, arial, helvetica; FONT-SIZE: 16pt; TEXT-DECORATION: none } .textsize9 { COLOR: black; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 9pt; LINE-HEIGHT: normal; TEXT-DECORATION: none } .textsize9 A { COLOR: navy; FONT-FAMILY: Verdana, Arial, helvetica; FONT-SIZE: 19pt; TEXT-DECORATION: none } .textsize9 A:active { COLOR: navy; FONT-FAMILY: verdana, arial, helvetica; FONT-SIZE: 19pt } .textsize9 A:hover { COLOR: navy; FONT-FAMILY: verdana, arial, helvetica; FONT-SIZE: 19pt; TEXT-DECORATION: none } .textsize8 { COLOR: black; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 18pt; LINE-HEIGHT: normal; TEXT-DECORATION: none } .textsize8 A { COLOR: navy; FONT-FAMILY: Verdana, Arial, helvetica; FONT-SIZE: 18pt; TEXT-DECORATION: none } .textsize8 A:active { COLOR: navy; FONT-FAMILY: verdana, arial, helvetica; FONT-SIZE: 18pt } .textsize8 A:hover { COLOR: navy; FONT-FAMILY: verdana, arial, helvetica; FONT-SIZE: 18pt; TEXT-DECORATION: none } .textsize16 { COLOR: red; FONT-FAMILY: Verdana, Helvetica, Arial; FONT-SIZE: 16pt; TEXT-DECORATION: none } .headera1 {BACKGROUND-COLOR: #A30100; border-bottom: 5px solid #FCB514; } .headera2 {BACKGROUND-COLOR: #A30100; border-bottom: 5px solid #FCB514; } .headera3 {BACKGROUND-COLOR: #ffffff; border-top: 1px solid #} .headera4 {BACKGROUND-COLOR: #ffffff; border-top: 1px solid #} .black {BACKGROUND-COLOR: white} .white {BACKGROUND-COLOR: } .lightgrey {BACKGROUND-COLOR: #ffffff} .gray {BACKGROUND-COLOR: #ffffff} .link {FONT-SIZE: 18pt;COLOR: ffffff;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .link A {COLOR: white;TEXT-DECORATION: none} .link A:active {COLOR: white;TEXT-DECORATION: none} .link A:hover {COLOR: white;TEXT-DECORATION: none} .linksmall {FONT-SIZE: 18pt;COLOR: #99ccff;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .linksmall A {COLOR: #99ccff;TEXT-DECORATION: none} .linksmall A:active {COLOR: #99ccff;TEXT-DECORATION: none} .linksmall A:hover {COLOR: #3366ff;TEXT-DECORATION: none} .pathlink {FONT-SIZE: 7.5pt;COLOR: #666666;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .pathlink A {COLOR: #666666;TEXT-DECORATION: none} .pathlink A:active {COLOR: #666666;TEXT-DECORATION: none} .pathlink A:hover {COLOR: #666666;TEXT-DECORATION: none} .setuptext {FONT-SIZE: 24pt;COLOR: lightgrey;FONT-weight: bold;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .setuptextsmall {FONT-SIZE: 10pt;COLOR: lightgrey;FONT-weight: bold;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .heading {FONT-SIZE: 10pt;COLOR: #6384ad;FONT-weight: bold;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .smallheading {FONT-SIZE: 8pt;COLOR: #6384ad;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .tbody {FONT-SIZE: 12pt;COLOR: black;LINE-HEIGHT: 13pt;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .tbody A {COLOR: #000000;TEXT-DECORATION: none} .tbody A:active {COLOR: #6384ad;TEXT-DECORATION: none} .tbody A:hover {COLOR: #6384ad;TEXT-DECORATION: underline} .textred {FONT-SIZE: 8pt;COLOR: #BD0000;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .textgreen {FONT-SIZE: 8pt;COLOR: #008000;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .textnavy {FONT-SIZE: 8pt;COLOR: #333399;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} .textgray {FONT-SIZE: 8pt;COLOR: gray;FONT-STYLE: italic;FONT-FAMILY: Verdana, sans-serif, Helvetica, Arial;} /* START CSS */ #content { float: left; width: 596px; padding-left: 20px; background-color: #ffffff; } #column1 { float: left; padding: 0px; padding-right:0px padding-left: 0px; background-color: #ffffff; width: 270px; } #column2 { float: left; margin:0 padding: 10px; padding-left: 20px; padding right: 0px background-color: #AAAAAA; width: 240px; } /* END CSS */ </style><SCRIPT LANGUAGE="JavaScript">errorcolor = '#eeeeee';</Script> <table cellspacing=0 border=0 cellpadding=40 width=100% align=left> <tr> <td align=left valign=middle> <script language="JAVASCRIPT"> var errfound = false; function ValidLength(item, len) { return (item.length >= len); } function error(elem, text) { if (errfound) return; window.alert(text); elem.select(); elem.focus(); elem.style.backgroundColor=errorcolor; errfound = true; } function Validate() { errfound = false; d=document.login if (!ValidLength(d.members_username.value,1))error(d.members_username,"Username should not be blank."); if (!ValidLength(d.members_password.value,1))error(d.members_password,"Password should not be blank."); return !errfound; } </script> <TR valign=top> <div style="border:1px solid #000000; width: 705px; padding-left: 75px; text-align:top;"><p> <font face="" color="#000000" size="5">Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text</font><br><br> </p></div></tr> </td> </tr> </table> </font></TD> </TR> </TABLE> </TD> <TD width="1" height=100% background="/smusermanager/images/dot.gif"><IMG src="/smusermanager/images/clear.gif" width="1" height=100% border=0></TD> </TR> </TABLE> <TABLE cellSpacing=0 valign=bottom cellPadding=0 width=100% border=0> <TR valign=top height=4> <TD colspan=2 class=gray><IMG src="/smusermanager/images/clear.gif" height=4 width=25 border=0></TD> </TR> <TR valign=middle height=25> <TD class=headera2> <FONT class=linksmall><font face="Arial" color="#ffffff" size="2">Copyright © 2007 <a href="" target="_blank"></a>. All Rights Reserved.</FONT></TD> <TD align=right class=headera2><font class=linksmall><font face="Arial" color="#ffffff" size="2">Email : <A href="</font></TD> </TR> </TABLE> </Body> </BODY> </HTML> Code (markup):
Try this. First add a class to the first table. for example: Next you will need to add something like this to your styles:
CSS is the best route but if you are looking for a quick fix, create a one pixel jpg or gif of the color you want the vertical line to be. Then create a coloumn with background="your image path". It will will create a vertical line as tall as that cell. To make it go the whole height of the table make your td rowspan="how many rows you have" You can do this as you make the swicth to CSS which you will love once you master it.