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

**tauhui** · 10-03-2011, 03:30 PM

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>

**rangana** · 10-03-2011, 04:18 PM

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.

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions