Results 1 to 2 of 2

Thread: how to align table side by side in a div tag?

  1. #1
    Join Date
    Apr 2010
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question how to align table side by side in a div tag?

    Hi,

    I am tying to make table align in a div tag. I was planning to make a show case for different item by using table. Is there any ways i can do and change in the css stylesheet?

    Your reply is appreciated Thanks a lot.


    Code:
    <style type="text/css">
    #tab {
    	text-align: center;
    }
    </style>
    </head>
    
    <body>
    <div id="tab">
      <table width="200" border="1" bgcolor="#33FF00" align="left" float="left" margin-left="auto" margin-right="auto">
        <tr>
          <td>one</td>
        </tr>
        <tr>
          <td>two</td>
        </tr>
        <tr>
          <td>three</td>
        </tr>
        <tr>
          <td>four</td>
        </tr>
      </table>
      <table width="200" border="1" bgcolor="#33FF33">
        <tr>
          <td>one </td>
        </tr>
        <tr>
          <td>two</td>
        </tr>
        <tr>
          <td>three</td>
        </tr>
        <tr>
          <td>four</td>
        </tr>
      </table>
      <table width="200" border="1" bgcolor="#33FF66" align="right" float="right">
        <tr>
          <td>one </td>
        </tr>
        <tr>
          <td>two</td>
        </tr>
        <tr>
          <td>three</td>
        </tr>
        <tr>
          <td>four</td>
        </tr>
      </table>
    </div>
    </body>

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Hi tauhui ,

    Good day!

    Let me start this off by highlighting to you that these are wrong:
    Code:
    float="left" margin-left="auto" margin-right="auto"
    float="right"
    float and margin are CSS' syntax so it must be inside the "style" attribute. The correct way is:
    Code:
    style="float:left; margin-left: auto; margin-right: auto;"
    style="float:right;"
    P.S. Keep in mind that there should only be one "style" attribute inside your tag so if you need to add more, just add it after the semi-colon and ensure it's inside the quotation marks.

    For your issue, the fix is by attending on those concerns I raised above and float the second table too.

    A less verbose way is to add in your CSS rules:
    Code:
    #tab table { float: left; }

    Hope that helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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
  •