How can I display an image and a table side by side

Question

I cant seem to have a logo and a table side by side but not very close to each other. The only way I've been able to achieve this is using a table, but the image and the table become very close to each other. I want to the table in the middle of the page, and the logo between the table and the far end of the left screen.

like this

logo table

this is how it is right now

logo

---table

<div id="header" style="height:15%;width:100%;">
    <img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
    <table border="1" width="44" style="margin-left:30%;float:top;"> 
    <tr>
            <td><h1><a href="home">Home</a></h1></td>
            <td><h1><a href="home">Home</a></h1></td>
            <td><h1><a href="home">Home</a></h1></td>
    </tr>
    </table>
</div>

Answer 1

use two div and set to float left

<div id="header" style="height:15%;width:100%;">
    <div style='float:left'>
        <img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
    </div>
    <div style='float:leftt'>
        <table border="1" width="44" style="margin-left:30%;float:top;"> 
            <tr>
                <td><h1><a href="home">Home</a></h1></td>
                <td><h1><a href="home">Home</a></h1></td>
                <td><h1><a href="home">Home</a></h1></td>
            </tr>
        </table>
    </div>
</div>