html question want to move a table beside another - html

Question

I have two tables. One above the other. I want to move the bottom table to the right of the top table. Right now when I run the server, the top table is positioned above the bottom table. Is there a way to move the bottom table to the right side of the top table?
<table>
<tr><th>Type</th><th>Quantity</th></tr>
</tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr>
</tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr>
</tables>
<table>
<tr><th></th><th>Status</th><th>Quantity</th></tr>
<tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr>
</table>

Answer 1

Change <table> to <table style="float: left">
After the last </table> add <div style="clear: both"></div>. This is to make sure nothing goes to the right of the second table.

Answer 2

Set both tables to have a fixed width and then float them using CSS:
table { float:left; width:400px; }

Answer 3

Something like this should work:
<div style="width: 400px;">
<div style="width: 200px; float: left;">
<table>
<tr><th>Type</th><th>Quantity</th></tr>
</tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr>
</tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr>
</tables>
</div>
<div style="width: 200px; float: left;">
<table>
<tr><th></th><th>Status</th><th>Quantity</th></tr>
<tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr>
</table>
</div>
<div style="clear: both;"></div>
</div>
You should move the CSS to your stylesheet instead if you apply this to production. Good luck.

Answer 4

If you don't have to support IE<8, you can set display: inline-block on the tables. This will make them behave like inline elements on the outside, but block-level elements on the inside. You'll also want to explicitly set the table widths, as well as the width of the containing block, unless you want the second table to pop below the first one when there's not enough room.