Most assuredly, not TABLEs as the page sited isn't 'tabular data' (e.g., 'like a spreadsheet with comparitive listings').
http://www.hotdesign.com/seybold/index.html
TABLEs are read twice by a browser before loading onto the user's screen, and the table will not render until it is 'read' the second time. This causes the delay that typically occurs when viewing a large columns of table-built layout. Complicate things, --start 'nesting' table-inside-of-table... it's a nightmare for user-devices. And there is all that non-semantic markup (images used for spacers, etc), -which all add up to page-bloat.
The site you cited could be easily created with a vertically-expanding 'wrapper' that contains three columnular DIVs of "height:auto;" so as to 'expand' as any additional DIV topic should be added. And if any column expands 'taller' than the current container DIV, it too 'expands', thus keeping the page together.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */
p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>
<style type="text/css">
#wrapper {width:95%; height:auto; margin:25px auto; border:3px dashed silver;}
#left {width:23%; border:1px solid gray; height:auto; padding:10px 6px; float:left;}
#middle {width:46%; border:1px solid gray; padding:10px 6px; height:auto; float:left}
#right {width:26%; border:1px solid gray; padding:10px 6px; height:auto; float:left}
#left div, #middle div, #right div {border:1px solid red; padding-bottom:14px;}
#left div h3, #middle div h3, #right div h3 {margin:5px;}
</style>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>
<div id="wrapper">
<div id="left">
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
</div><!-- end "left" -->
<div id="middle">
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
</div><!-- end "middle" -->
<div id="right">
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. </p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. </p>
</div>
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. </p>
</div>
</div><!-- end "right" -->
<div style="clear:both;"><!-- required, before closing "wrapper" --></div>
</div><!-- end "wrapper" -->
</body>
</html> Here is a quick-n-dirty example (took me about 10-mins to write?) of what I mean. Important css is BOLD
Validates, looks exactly the same to IE as to Fx.
As you add new "<div></div>" to any of "#left", "#middle" or "#right" DIVs, the "wrapper DIV" exapnds. Note the 'clearing DIV' at the very end. -Must remain just before the closing of "#wrapper" else the visible dotted silver border 'collapses', as 'floating' removes content from page.
This would work for what you described. Some tweaking to make it 're-size' for smaller resolutions is easily added.
Enjoy. :)