Help with html columns

I've got three vertical columns on a web page that look pretty good.
I'd like to put a horizontal box across the top of column 2 and 3, and below columns 2 and 3. Can you help me with this? I appreciate any help. Thanks

Here's what I have right now:

<table class="tab1">
<tbody>
<img src="temp/images/Q1.png" border="0" />
</tbody>
</table>

<table class="tab2">
<tbody>
Text TEXT text Text TEXT text
</tbody>
</table>

<table class="tab3">
<tbody>
Text TEXT text Text TEXT text
</tbody>
</table>
</td>

Code (markup):

Code:
.tab1 {  
width:260px;  
float: left;  
text-align:left;
margin:0px 0px 0px 50px;
font-size: 12px;
}

.tab2 {  
width:260px;  
float: left;  
text-align:left;
margin:0px 0px 0px 20px;
font-size: 12px;
}
						
.tab3 {  
width:260px;  
float: left;  
text-align:left;
margin:0px 0px 0px 20px;
font-size: 12px;
}

Code (markup):

 

Ouch!! Why are you using tables for layout purposes?

<div id="wrapit">
<div class="col_a"></div>
<div class="col_bc"></div>
<div class="col_b"></div>
<div class="col_c"></div>
<div class="col_bc"></div>
</div>

Code (markup):

#wrapit {
margin: 0px auto;
padding: 0px 0px 10px 0px;
width: 640px;
background: #f7f7f7;
border: 1px solid #ccc;
overflow: auto;
}

.col_a {
float: left;
width: 200px;
height: 500px;
margin: 10px 0px 0px 10px;
padding: 0px;
background: #ccc;
}

.col_bc {
float: left;
width: 410px;
height: 125px;
margin: 10px 0px 0px 10px;
padding: 0px;
background: #ccc;
}

.col_b {
float: left;
width: 200px;
height: 230px;
margin: 10px 0px 0px 10px;
padding: 0px;
background: #ccc;
}

.col_c {
float: left;
width: 200px;
height: 230px;
margin: 10px 0px 0px 10px;
padding: 0px;
background: #ccc;
}

Code (markup):

Here it is in action: http://clientdemos.info/notables/

 

I am agree with your answer.

 

Use <Div> instead of tables . <Divs> are best for columns as they are flexible when compared to tables