How do I layout tables? - html

Question

I'm creating a website and I'm trying to create a.. well I don't know what it is called exactly but it basically includes a list, a button, an image, a title and some text.
All elements are in seperate tables.
What I'd like to do is get the title to be top with the image underneath that, the list to the RIGHT of both the image and the title, the text undereneath the list and the button to be at the center berlow everything.
<table border="1" width="350px" height="50px" class="title_table">
<tr>
<td align="center">
<multiline>Basic plan set-up</multiline>
</td>
</tr>
</table>
<table border="1" width="350px" height="125px" class="image_table">
<tr>
<td align="center">
<img editable="true" mc:edit="feature-img1" style="display: block;" width="102" height="100" src="http://promailthemes.com/campaigner/layout2/white/blue/img/feature-img1.png" alt="feature image1" class="feature-img" />
</td>
</tr>
</table>
<div class="list_table">
<table border="1" width="350px" height="300px">
<tr>
<td align="left">
<p>What's included:</p>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</td>
</tr>
</table>
</div>
<table border="1" width="350px" height="125px" class="button_table">
<tr>
<td align="center">
<input type="submit" value="To checkout!" class="submit">
</td>
</tr>
</table>

Answer 1

Is this what you're trying to achieve?
DEMO: JSFiddle
Code:
<table border="1" width="350px" height="50px" class="title_table">
<tr>
<td align="center">
<p>Basic plan set-up</p>
</td>
<td rowspan="2">
<p>What's included:</p>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</td>
</tr>
<tr>
<td align="center">
<img editable="true" mc:edit="feature-img1" style="display: block;" width="102" height="100" src="http://promailthemes.com/campaigner/layout2/white/blue/img/feature-img1.png" alt="feature image1" class="feature-img" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="To checkout!" class="submit" />
</td>
</tr>
</table>
A few sidenotes:
Try to avoid using tables solely for the purpose of lay-out. Use div's and CSS instead, which is a much better solution.
Different tables for each section is overkill. If you insist on using tables, use only 1.
Separate your CSS and HTML if possible. Create a separate file for both, and link to the CSS from within the HTML page.