This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
November 30, 2007 12:10am
Subscribe [4]#1 / Nov 30, 2007 12:10am
hi
does any know how to place 2 tables adjacent to each other(i mean side by side) on a webpage. it should b so adjusted tat, changes in 1 table shouldnt affect the other table. both the table should b independent of each other.
is it possible to do so ?pls kindly let me know abt it.
#2 / Nov 30, 2007 5:13pm
I don’t use tables, but why not just have two table tags, one after the other? Does that work?
#3 / Nov 30, 2007 6:09pm
you can use css to set the display of the table to inline like this
<html>
<table [removed] border=1 cellpadding=5>
<tr>
<td>cell 1a</td>
<td>cell 2a</td>
</tr>
</table>
<table [removed] border=1 cellpadding=5>
<tr>
<td>cell 1b</td>
<td>cell 2b</td>
</tr>
</table>
</html>
#4 / Dec 03, 2007 7:59pm
You could float the first table to the left. As long as the combined width of the tables is less than the width of the DIV or containing element they’re in, they should appear side-by-side.
CSS:
#contents {
width: 800px;
}
#contents table {
width: 390px;
}
#table_one {
float: left;
}HTML:
<div id="contents">
<table cellspacing="0" cellpadding="0" id="table_one">
<tr>
<td>One</td>
<td>One</td>
</tr>
<tr>
<td>One</td>
<td>One</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="table_two">
<tr>
<td>Two</td>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
<td>Two</td>
</tr>
</table>
</div>#5 / Dec 03, 2007 8:38pm
kirkaracha’s example will work and be cleanest… just make sure you clear your floated elements. Several ways exist. Putting an empty div with a class of clear will work if you set the .clear class in your CSS.
<div id="contents">
<table cellspacing="0" cellpadding="0" id="table_one">
<tr>
<td>One</td>
<td>One</td>
</tr>
<tr>
<td>One</td>
<td>One</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="table_two">
<tr>
<td>Two</td>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
<td>Two</td>
</tr>
</table>
<div class="clear"></div><!--/clear-floats-->
</div>#contents {
width: 800px;
}
#contents table {
width: 390px;
}
#table_one {
float: left;
}
.class {
clear: both;
}#6 / Dec 04, 2007 12:08pm
You could also float the containing div or clear the floats without structural markup instead of having the empty clearing div.
#7 / Dec 04, 2007 1:30pm
Even better.
#8 / Dec 04, 2007 2:21pm
why cant you just set the table elements display property to inline?
<style text/css>
table.inlineTable{
display:inline;
}
</style>
</head>
<body>
<table class=inlineTable><tr><td>table one</td></tr></table>
<table class=inlineTable><tr><td>tabel two</td></tr></table>
<table><tr><td>this table is Not in line</td></tr></table>
</body>
</html>
I think that is much more cleaner and much less code