Can this webpage be changed easily to CSS instead of tables?

Just starting with Expression Web 3. I painstakinly altered a template to what I need but am wondering if I should attempt to change and or recreate it completely using CSS so it is cleaned up? I'm not that versed in code of any kind and am concerned this may be a bit messy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Regional Missouri Bank</title><link rel="shortcut icon" href="graphic/favicon.ico">

<script type="text/javascript" src="sclmenu.js"></script>
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: SCL Software :: http://www.sclsoftware.com/en */

(function(){
 


var menu2=new Scl.Menu();
  menu2.bottomToTop=true;
  menu2.addItem('Checking','http://regionalmissouri.com/check.htm');
  menu2.addItem('Savings','http://regionalmissouri.com/saving.htm');
  menu2.addItem('Certificate of Deposit','http://regionalmissouri.com/cod.htm');
  menu2.addItem('IRAs','http://regionalmissouri.com/ira.htm');
  menu2.addItem('Kids Only','http://regionalmissouri.com/kids_corner1.htm');
  menu2.dockTo('demo2');

var menu3=new Scl.Menu();
  menu3.bottomToTop=true;
  menu3.addItem('Residential Real Estate','http://regionalmissouri.com/realestate1.htm');
  menu3.addItem('Agricultural','http://regionalmissouri.com/farm1.htm');
  menu3.addItem('Vehicle','http://regionalmissouri.com/auto1.htm');
  menu3.addItem('Business','http://regionalmissouri.com/comloan1.htm');
  menu3.addItem('Personal','http://regionalmissouri.com/personalloan1.htm');
  menu3.dockTo('demo3');
  
var menu4=new Scl.Menu();
  menu4.bottomToTop=true;
  menu4.addItem('Login','https://www.pcsbanking.net/onlinebanking7/login.r?t-bank=101909097');
  menu4.addItem('Demo','https://www.pcsbanking.net/onlinebanking7/acctlist.w');
  menu4.addItem('Enrollment','https://www.pcsbanking.net/onlinebanking7/login.r?t-bank=101909097');
  menu4.dockTo('demo4');

  var menu5=new Scl.Menu();
  menu5.bottomToTop=true;
  menu5.addItem('Marceline','');
  menu5.addItem('Salisbury','');
  menu5.addItem('Marceline Uptown','');
  menu5.addItem('Keytesville','');
  menu5.addItem('Bucklin','');
  menu5.dockTo('demo5');

 var menu6=new Scl.Menu();
  menu6.bottomToTop=true;
  menu6.addItem('Greenback Jack Savings','http://regionalmissouri.com/kids_corner1.htm');
  menu6.addItem('Greenback Jack CD','http://regionalmissouri.com/kids_corner.htm');
  menu6.dockTo('demo6');

 var menu7=new Scl.Menu();
  menu7.bottomToTop=true;
  menu7.addItem('Overdraft Protection','http://regionalmissouri.com/service_chrg.htm');
  menu7.addItem('Remote Deposit','http://regionalmissouri.com');
  menu7.addItem('Service Charges','http://regionalmissouri.com/service_chrg.htm');
  menu7.addItem('Deluxe ID Theft Protection','http://www.deluxe-idtheftblock.com/');
  menu7.addItem('Order Checks','http://www.deluxe.com/');
  menu7.addItem('Text Alerts','http://my.textcaster.com/ServePopup.aspx?id=1467');
  menu7.addItem('Saving Money Tips','http://www.feedthepig.org/');
  menu7.addItem('Voice Access','http://regionalmissouri.com/voice.htm');
  menu7.dockTo('demo7');

}
)();

//-->
</script>
<script>
// =======================================

// set the following variables

// =======================================



// Set slideShowSpeed (milliseconds)

var slideShowSpeed = 3000



// Duration of crossfade (seconds)

var crossFadeDuration = 3



// Specify the image files

var Pic = new Array() // don't touch this

// to add more images, just continue

// the pattern, adding to the array below



Pic[0] = 'images/slide1.jpg'

Pic[1] = 'images/slide2.jpg'

Pic[2] = 'images/slide3.jpg'

Pic[3] = 'images/slide4.jpg'





// =======================================

// do not edit anything below this line

// =======================================



var t

var j = 0

var p = Pic.length



var preLoad = new Array()

for (i = 0; i < p; i++){

   preLoad[i] = new Image()

   preLoad[i].src = Pic[i]

}



function runSlideShow(){

   if (document.all){

      document.images.SlideShow.style.filter="blendTrans(duration=2)"

      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"

      document.images.SlideShow.filters.blendTrans.Apply()      

   }

   document.images.SlideShow.src = preLoad[j].src

   if (document.all){

      document.images.SlideShow.filters.blendTrans.Play()

   }

   j = j + 1

   if (j > (p-1)) j=0

   t = setTimeout('runSlideShow()', slideShowSpeed)

}

</script>

<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/JavaScript">
<!--function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">

.menu {
	border: 1px solid #004a00;
	padding: 1px 1px 1px 1px;
	background-color: #ffffff;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	color: #004a00;
	font-weight: bold;
}
.menuItem {
	padding: 3px 6px 3px 6px;
	border-bottom: solid 1px #dddddd;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	background-color: #ffffff;
}
.menuItem:hover {
	background-color: #eeeeee;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	color: #FFFF00;
}
.menuItem a {
	color: #004a00;
	text-decoration: none;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: x-small;
}

#demo {
	background-color: #004a00;
	cursor: pointer;
	padding: 5px 10px 5px 10px;
	margin: 20px 0;
	width: 525px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: xx-small;
	font-weight: lighter;
	font-style: normal;
	font-variant: normal;
	color: #ffffff;
}
#demo span {
	padding: 3px 15px 0px 15px;
	cursor: pointer;
  	menu.bottomToTop = true;
}
#demo span:hover {
	background-color: #ffff00;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: xx-small;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
	color: #eeeeee;
}

.style7 {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: x-small;
	font-weight: bold;
}

.style8 {
	margin-bottom: 0px;
	font-weight: normal;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.style10 {
	color: #888888;
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.newStyle1 {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: xx-small;
	font-weight: bold;
}

#logo {
}

.style11 {
	text-align: left;
}
.style12 {
	font: 11px/14px Tahoma, Arial, Geneva, sans-serif;
	color: #666666;
	width: 747px;
	text-align: left;
	padding-left: 5px;
	margin-left: 3px;
	height: 10px;
	margin-top: 5px;
	bottom: 3px;
}
#left {
}

#topspacer {
	padding: 3px;
}
#leftannouncements {
	width: 300px;
	float: left;
	height: 268px;
}
#new ad campaign {
}
#newadcampaign {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: x-small;
	margin-right: 30px;
	margin-left: 30px;
	text-align: left;
	width: 706px;
}
#internalleftannounch {
	width: 266px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-variant: small-caps;
	font-size: medium;
	color: #FFFFFF;
	background-color: #000000;
	font-style: italic;
}
#calendarspace {
	border-top: thin solid #FFFFFF;
	padding: 1px 0px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
		font-size: small;
		font-variant: small-caps;
		font-weight: normal;
		font-style: normal;
		color: #FFFFFF;
		background-color: #004a00;
		width: 300px;
	height: 19px;
	border-left-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}
#leftsidecolumn {
	float: left;
	width: 300px;
	margin-left: 30px;
}
#greenspacer {
	background-color: 004a00;
	height: 2px;
	width: 300px;
}
#top title {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: x-large;
}
#toptitle {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: x-large;
	font-weight: bold;
	font-style: normal;
	color: #000000;
}

#middlecontainer {
	background-color: #FFFFFF;
	width: 766px;
}

#internalrightannounch {
	width: 300px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-variant: small-caps;
	font-size: medium;
	color: #FFFFFF;
	background-color: #000000;
	font-style: italic;
}
#rightsideinfo {
	border-style: hidden;
	width: 300px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-variant: small-caps;
	font-size: medium;
	color: #000000;
	background-color: #FFFFFF;
	font-style: italic;
}

#copytext {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: x-small;
	font-weight: lighter;
	color: #333333;
	width: 706px;
}
#leftimage {
	float: left;
	width: 315px;
}

leftsideinfo {
}

#whiteleftspace {
	border-style: hidden;
	background-color: #FFFFFF;
	height: 5px;
	width: 300px;
}
#internalleftannounch {
	width: 300px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-variant: small-caps;
	font-size: medium;
	color: #FFFFFF;
	background-color: #000000;
	font-style: italic;
}
#greenspacer {
	background-color: 004a00;
	height: 3px;
	width: 300px;
}

a {
	color: #666666;
}
a:visited {
	color: #808080;
}
a:active {
	color: #000000;
}
a:hover {
	color: #808080;
}

.style13 {
	color: #888888;
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	vertical-align: bottom;
}

#rightsidecloumn {
	float: right;
	width: 300px;
	margin-right: 30px;
}

#calendarspacebucklin {
	border-top: thin solid #FFFFFF;
	padding: 1px 0px 0px 0px;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-size: small;
	font-variant: small-caps;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	background-color: #004a00;
	width: 300px;
	height: 19px;
	border-left-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}
#greenspacerbottomwhite {
	border-width: thin;
	border-color: #FFFFFF;
	background-color: 004a00;
	height: 3px;
	width: 300px;
	border-bottom-style: solid;
}

</style>

</head>
<body onLoad="runSlideShow()"onLoad="MM_preloadImages">
<table width="100%" style="height:746px" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td width="50%">
		   <table width="100%" style="height:100%" cellpadding="0" cellspacing="0" border="0">
				   <tr>
							   <td width="100%" style="height:100%; background-image:; background-position:bottom; background-repeat:repeat-x; position: relative;" bgcolor="#004A00"></td>
							 </tr>
				   </tr>
				</table>
		</td>
		<td style="width: 766">
		<table width="766" style="height:723px" cellpadding="0" cellspacing="0" border="0" align="center">
				<tr>
					<td style="width:119px;" rowspan="1"><table width="766" style="width: 766px; height:0px;" cellpadding="0" cellspacing="0" border="0">
<tr><table border="0" cellpadding="0" cellspacing="0">

<tr>

<td id="VU" height=150 width=150>


<img src="images/slide1.jpg" name='SlideShow' width=766 height=210></td>

</tr>

					<table style="height: 459px;" cellpadding="0" cellspacing="0" border="0" class="style8">
					      <tr class="style10">
						    <td style="height:66px; " class="style10">
<div id="demo" style="width: 766px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 7px; font-weight: bold; font-style: bold; font-variant: normal; left: 23px; ">
  <span id="demo1" class="style7">Home</span>
  <span id="demo2" class="style7"onClick="document.location.href='deposit.htm'" a="" >Deposit Products</span>
  <span id="demo3" class="style7">Loans</span>
  <span id="demo4" class="style7">Internet Banking</span>
<span id="demo5" class="style7">Contact Us</span>
<span id="demo6" class="style7">Kids Only</span>
	<span id="demo7" class="style7">Other Services</span></div>
 						   <div id="toptitle">
							   Community Bank - Locally Owned - Invested</div><div id="topspacer"></div>
 						   <div id="newadcampaign">
							   <div id="leftimage" style="height: 143px">
							   	<img alt="" height="143" src="images/123.gif" width="315"></div>
							   <p id="copytextrighthome">Lorem ipsum dolor sit amet, 
							   consectetur adipiscing elit. Pellentesque ac nisi 
							   in quam condimentum molestie. Aliquam erat 
							   volutpat. Nunc est velit, iaculis elementum 
							   consectetur id, laoreet aliquam nisl. Curabitur 
							   bibendum viverra nunc dignissim imperdiet. Ut sed 
							   urna vel risus viverra consequat. Donec convallis 
							   velit nec libero bibendum vitae tincidunt purus 
							   tempus. Donec iaculis lectus elit, vel pretium 
							   ipsum. Aliquam a ligula nisi. Mauris consequat 
							   imperdiet orci, id molestie tellus fringilla et. 
							   Etiam ut volutpat libero. Nullam quis mi tellus, 
							   eu scelerisque arcui aculis.</p>
							   <br> </div>
							<div id="topspacer">
							</div><div id="topspacer">
							</div>

							 <div id="middlecontainer"><div id="rightsidecloumn">
								
								<div id="internalrightannounch">
									WEATHER</div>
								 <div id="greenspacerbottomwhite"></div><div id="whiteleftspace"><div id="wx_module_8184">
   <a href="http://www.weather.com/weather/local/64658">Marceline Weather Forecast, MO (64658)</a>
</div>

<script type="text/javascript">

   /* Locations can be edited manually by updating 'wx_locID' below.  Please also update */
   /* the location name and link in the above div (wx_module) to reflect any changes made. */
   var wx_locID = '64658';

   /* If you are editing locations manually and are adding multiple modules to one page, each */
   /* module must have a unique div id.  Please append a unique # to the div above, as well */
   /* as the one referenced just below.  If you use the builder to create individual modules  */
   /* you will not need to edit these parameters. */
   var wx_targetDiv = 'wx_module_8184';

   /* Please do not change the configuration value [wx_config] manually - your module */
   /* will no longer function if you do.  If at any time you wish to modify this */
   /* configuration please use the graphical configuration tool found at */
   /* https://registration.weather.com/ursa/wow/step2 */
   var wx_config='SZ=300x250*WX=FHW*LNK=SSNL*UNT=F*BGI=fall*MAP=null|null*DN=regionalmissouri.com*TIER=0*PID=1136502802*MD5=a59357510e03db5d7b3a5b164037f073';

   document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document.location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');  
</script></div>

								
							</div><div id="leftsidecolumn">
							
							<div id="leftannouncements">
								<div id="internalleftannounch">
								Community Announcements</div>
								<div id="greenspacer"></div>


								<div id="calendarspace">
							
									<a href="http://www.linncountyleader.com/" style="text-decoration:none">Linn County Leader</a></a></div>
								<div id="calendarspace">
																		<a href="http://cvnewspress.com/" style="text-decoration:none">Chariton Valley Press</a></div>
								<div id="calendarspace" style="height: 25px">
									<a href="http://www.marceline.k12.mo.us/" style="text-decoration:none">Marceline Public Schools</a></div>
								<div id="calendarspace">
									<a href="http://www.salisbury.k12.mo.us/" style="text-decoration:none">Salisbury 
		Public Schools</a></div>
								<div id="calendarspace">
									<a href="http://schoolweb.missouri.edu/keytesville.k12.mo.us/" style="text-decoration:none">Keytesville Public Schools</a></div>
								<div id="calendarspace">
									<a href="http://www.bucklin.k12.mo.us/" style="text-decoration:none">Bucklin Public Schools</a></div>
								 <div id="calendarspacebucklin"></div>
<div id="internalleftannounch">
									 Market Information</div><div id="greenspacer"></div><div id="calendarspace">
									<a href="http://finance.yahoo.com/indices?e=dow_jones" style="text-decoration:none">Yahoo Finance</a></div>
								


								 </div>
							
 						   </div>
							
							
							
 </td>
						  </tr>
					      					      
					      <tr class="style10">
						    <td style="border-width: 0px; height:100px; " class="style13">
							<img alt="" height="75" src="images/rmblogo.gif" width="204"></td>
						  </tr>
					      					      
					      </table>
								
				<tr class="p_1">
									<td style="background-position: 50% bottom; height:93; width: 334; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll;" class="bottom">
											
<div class="style12">
	<div class="style11">
		<a href="http://www.regionalmissouri.com/privacy.htm">
									<div style="width: 737px; text-align: right">
												<img alt="" height="50" src="images/EHL-logo.gif" width="42"></a><img alt="" height="50" src="images/membrFDIC.gif" width="87"></div>
											</a>Regional 
	Missouri Bank (c) 2009. All rights reserved&nbsp;&nbsp;  <a href="http://www.regionalmissouri.com/privacy.htm">- 
						Privacy Notice -</a></div>
									</div>
									</td>
				</tr>
				</table>
			<td width="50%">
		   <table width="100%" style="height:100%" cellpadding="0" cellspacing="0" border="0">
				   <tr>
				  <td width="100%" style="height:100%; background-image:; background-position:bottom left; background-repeat:repeat-x;" bgcolor="#004a00"></td>
			  </tr>
				</table>
		</td>
	</tr>
</table>
</body>
</html>

Open in new window

mobankerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Hi Mobanker,
Yes that's possible and would take approx 30 minutes for a good CSS person.
However you need to be aware that your current code is incomplete and missing a fairly large part near the bottom, there are two tables that were not closed at the end of the document

Starting from the line
<td style="width: 119px;" rowspan="1">

This table cell and all the above open tags were never closed, not a big deal but just though you should know

Try properly formatting the code to make it easier to detect which tags are not closed.
I've attached a properly formatted version for you.


index.htm
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
joeyluCommented:
Adobe Dreamweaver has a function that does exactly what you need.

If you have it, go to Modify > Convert > Tables to Layers

That will take all your tables and make them DIVs (basically) with the correct CSS positioning and tags.
0
mobankerAuthor Commented:
Thanks!
0
mobankerAuthor Commented:
Good to know.
0
remorinaCommented:
Thanks mobanker
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development Software

From novice to tech pro — start learning today.