There is no template that you’ve built using CSS and HTML no matter how or of what quality that can’t be used in modx.
That being said there are dozens of editors out there free and paid that can produce better HTML/CSS than that. Inline styles, Font elements, and deprecated attributes like bgcolor are very outdated. NVU editor is a free open source WYSIWYG editor that outputs far better HTML than above. There are a number of others. I’m not saying abandon WYSIWYG until you are ready to make the switch but you are actually going to make it harder by continuing to use an editor that spews out worse HTML than even TINYMCE or FCKEditor.
I started web design using Dreamweaver in Design View and at that time its output was not great (Dreamweaver 3). I started having to spend so much time in the Code View to fix problems with the layouts that I eventually dumped Dreamweaver for HTML Kit and now Textmate.
Unless you are designing for IE5 there is no reason you can’t just switch your single column table out with a div.
Here’s a basic page with less markup and the CSS styles in the head can all be placed in an external file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
html{background:#aa9 url(bg_imgurl.png) 0 0;}
body{width:760px;margin:0px auto;}
#header,#content,#subcontent,#footer{margin-bottom:20px;border:2px solid #333;padding:20px;}
#content{float:left;margin:0 20px 20px 0;width:480px;}
#subcontent{float:left;margin:0;width:172px;}
#footer{clear:both;}
</style>
</head>
<body>
<div id="header">
<p>Header Image</p>
</div>
<div id="content_wrapper">
<div id="content">
<h1 id="heading">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="subcontent">
<p>Random Content</p>
</div>
</div>
<div id="footer">
Footer content
</div>
</body>
</html>