Aligning Two Tables in HTML - html

Question

I am attempting to align two separate tables in html. I want them centered with one on the left, one on the right and some space between the tables. Here is the code I currently have set up. I have them aligned, but one is left and one is right with lots of space between them. New to Html please would be appreciated!
<h1>
Retrofit</h1>
<p>
Kendell Retrofit is the latest division to the Kendell divisions. Our Retrofit team includes customer service, outside sales, production and keying specialists. </p>
<div>
<table style="float:left">
</table>
<table align="left" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
Markets:<br />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Commercial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Financial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Global</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Government</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Healthcare</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Higher Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
K-12 Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Retail</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="float:right">
</table>
<table align="right" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
<p>
Brands:</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Arrow</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Best</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Corbin Russwin</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Dorma</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Falcon</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Kwikset</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Sargent</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Schlage</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Stanley</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Weiser</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Yale</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<p>
</p>

Answer 1

Basic nested table will do it.
<table width="600px" >
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of left side
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of right side
</td>
</tr>
</table>
</td>
</tr>
</table>
Check it here
Note: margin: 0 auto; makes your table at the center

Answer 2

Instead of using float left/right use inline-table as shown below:
table
{
display:inline-table;
}
This way you can have tables side by side.

Answer 3

If you change the value of "style="width: 150px" by one more high (200px or 250px), does it work ?

Answer 4

You only need to float the first table. Then you simply add margin-right: 50px; (for example) to it and the second one will be next to it, 50px away. If you want to center them both, put them in a div with some width and add margin: 0 auto;. Here is a jsbin example.
P.S.: Press edit in top-right corner to see the code. The good thing about using this float to the first table, with 2 seperate tables and with margin: 0 auto; to the parent div is that it is responsive. Try resizing the browser window and you will see how the tables seperate on smaller resolutions (good for a website that is designed to run on smartphones too)

Answer 5

They are misaligned because you have Markets:<br /> in first table and <p>Brands:</p> in second table. You need to be consistent with them.
You can use float:left; and margin-right on the first div to get the spacing.
JSBin sample (Seems like Fiddle is down)

Answer 6

See this DEMO
You can try on the second table :
<table style="float:left">
and replace on the second table :
align="right"
with
align="left"