HTML / CSS Table Placement - html

Question

Below is my code for 2x tables. There is PHP & results I have removed. But I cannot get these on one line but next to each other.
I have tried Align Left/Right and this puts them on 2x separate lines? I have tried float as well and this has not helped either.
Does anybody have advice for me?
HTML
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Received Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent To</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Sent Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent By</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
CSS :
table
{
border: #000000 1px solid;
background-color: #363636;
}

Answer 1

You could also add a class of left and right to each table and define floats in your css if you want the tables to always align left and right.
table.left {
float: left;
}
table.right {
float: right;
}
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="left">
YOUR LEFT TABLE content
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="right">
YOUR RIGHT TABLE content
</table>
You don't need the 'table' class because you can use the table tag as a selector.

Answer 2

Try adding display:inline-block;
Update CSS
table
{
border: #000000 1px solid;
background-color: #363636;
display:inline-block;
}
WORKING:DEMO

Answer 3

Float doesn't work on display: table which is the default table display property.
You have to put display: block on it in order to float them
table {
border: 1px solid #000;
display: block;
float: left;
width: 40%;
}
table:first-child {
margin-right: 40px;
}
Working Fiddle