how to align table side by side in a div tag? [Archive]

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? :confused:

Your reply is appreciated Thanks a lot.

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

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:

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:

#tab table { float: left; }

Hope that helps.