Two table side by side

I have two table side by side . [ I have used style=display:inline in <table> for this]

Now I want to add gap between these two table.

How do I put a space between these two tables.

I think &nbsp is a bad choice . Do you have other workaround ?

add margin-right to the one on the left or put margin-left on the right one?

margin-left to the right box does not work…both the table’s are moving when I do a margin-left to the right box.

Do you have a sample code to do it ?

This is my table. here is the original code . ( without margin-left to the right box)


<table width="346" height="218" border="0" class="borderTable inlineTable" >
    <tr>
      <td>&nbsp;</td>
      <td>User Name 
        <label>
        <input type="text" name="textfield2">
      </label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Password
        <label>
        <input type="text" name="textfield3">
      </label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Login  &nbsp; Sign up </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
   <table width="346" height="218" border="0" class="borderTable inlineTable" >
    <tr>
      <td>&nbsp;</td>
      <td>User Name 
        <label>
        <input type="text" name="textfield2">
      </label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Password
        <label>
        <input type="text" name="textfield3">
      </label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Login  &nbsp; Sign up </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>

This is my CSS

<style>
.borderTable {
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
}

table.inlineTable{
display:inline;
</style>

I would do it like this

  1. set a div to contain both tables

  2. give each table an appropriate width

  3. in the div in 1), float 1 table left and the other float right

  4. apply left margin to the left table and right margin to the right table to adjust their positions

This is just my understanding . Please clarify the confusion

I meant this

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
#container {
    width: 800px;
    border: 1px solid red;
    overflow: hidden;
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 0px
}
 
#tbl_1 {
    width: 300px;
    float: left;
    border: 1px solid blue;
    margin-left: 20px;
}
 
#tbl_2 {
    width: 300px;
    float: right;
    border: 1px solid green;
    margin-right: 20px;
}
</style>
 
</head>
<body>
 
<div id="container">
    <table id="tbl_1">
        <tr>
            <td>This table 1</td>
        </tr>
    </table>
 
    <table id="tbl_2">
        <tr>
            <td>This table 2</td>
           </tr>
    </table>
</div>
 
</body>
</html>

you can play with the widths aand margins to suit your requirement.

You need to understand what display:inline does. It makes the elements having such a CSS declaration behave based on the inline content model: like being character level elements and text strings. But it also can affect some other properties of the elements leading to undesired results.

Having said that, you can now use for them, CSS declarations accordingly, like word-spacing.

Here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>

  <meta	http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta	http-equiv="Content-Language" content="en">
  
  <title>Tables side by side</title>
  
  <style type="text/css">  

    body {
      word-spacing:50px;
    }
    
    table{
      display:inline;
      mergin-left:10px;
      width:346px;
      height:218px;
      padding: 2px 4px 2px 4px;
      border: 1px solid #660000;
      word-spacing:0;
    }
    
  </style>

</head><body>

  <table>
    <tr>
      <td></td>
      <td> 
        <label>User Name
          <input type="text" name="textfield2">
        </label>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>
        <label>Password
          <input type="text" name="textfield3">
        </label>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Login   Sign up</td>
      <td></td>
      <td></td>
    </tr>
  </table>
   <table>
    <tr>
      <td></td>
      <td>
        <label>User Name 
          <input type="text" name="textfield2">
        </label>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>
        <label>Password
          <input type="text" name="textfield3">
        </label>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Login   Sign up</td>
      <td></td>
      <td></td>
    </tr>
  </table>
  
</body></html>

You should be aware that the example, while respecting your display:inline implementation, will only work properly in IE8. And so does your original code. Have a look at it using more than just IE8.

So you need another approach to make it cross browser. Like the one (but not restricted to) Kalon suggested.