HTML -- two tables side by side [duplicate]

Possible Duplicate:
Trying to get tables next to each other horizontal

I have two html tables already created. How can I place them side by side instead of 1 above the other?


Depending on your content and space, you can use floats or inline display:

<table style="display: inline-block;">

<table style="float: left;">

Check it out here: http://jsfiddle.net/SM769/

Documentation

  • CSS display on MDN - https://developer.mozilla.org/en/CSS:display
  • CSS float on MDN - https://developer.mozilla.org/en/CSS/float

You can place your tables in a div and add style to your table "float: left"

<div>
  <table style="float: left">
    <tr>
      <td>..</td>
    </tr>
  </table>
  <table style="float: left">
    <tr>
      <td>..</td>
    </tr>
  </table>
</div>

or simply use css:

div>table {
  float: left
}

<div style="float: left;margin-right:10px">
  <table>
    <tr>
      <td>..</td>
    </tr>
  </table>
</div>
<div style="float: left">
  <table>
    <tr>
      <td>..</td>
    </tr>
  </table>
</div>