SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 ?

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    add margin-right to the one on the left or put margin-left on the right one?
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    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)

    Code:
    <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>

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by windowsxp View Post
    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 ?
    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

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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 // you want to float table or float div ??? I think we may need to float the div ..as div contains the table ...please clarify this part.

    4) apply left margin to the left table and right margin to the right table to adjust their positions
    Again, I think we need to apply the left margin to the the div but not the table as div is containing the table here.



    This is just my understanding . Please clarify the confusion

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I meant this

    Code:
     
    <!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.

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •