How to place two tables side by side

HTML & CSS
1

I have these two tables (code below), that are stacked on top of each other.
What do I need to do to place them side by side?

Thanks

<tr><table>
<tr><td class="box3_t">TEXT HERE
<tr><td class="box3_b"></td></tr>
</td></tr></table>

<tr><table>
<tr><td class="box4_t">TEXT HERE
<tr><td class="box4_b"></td></tr>
</td></tr></table>
2

You could place them inside two divs that are floated against eachother. Like this (I haven’t tested the code but try it out):


<div class="container">
<div class="floatLeft">
<tr><table>
<tr><td class="box3_t">TEXT HERE
<tr><td class="box3_b"></td></tr>
</td></tr></table>
</div>

<div class="floatRight">
<tr><table>
<tr><td class="box4_t">TEXT HERE
<tr><td class="box4_b"></td></tr>
</td></tr></table>
</div>
</div>

Then in your CSS, define these styles:


.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }

Not sure how that will work, but that’s the general idea.

3

another way, no divs.

<!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-Script-Type" content="text/javascript; charset=utf-8">
		<title>Conforming HTML 4.01 Strict Template</title>
	</head>

	<body>
		<table style="display: inline-block; border: 1px solid; float: left; ">
		<tr>
			<td>1-11</td>
			<td>1-12</td>
		</tr>
		<tr>
			<td>1-21</td>
			<td>1-22</td>
		</tr>
		</table>
		
		<table style="display: inline-block; border: 1px solid; ">
		<tr>
			<td>2-11</td>
			<td>2-12</td>
			<td>2-13</td>
		</tr>
		<tr>
			<td>2-21</td>
			<td>2-22</td>
			<td>2-23</td>
		</tr>
		<tr>
			<td>2-31</td>
			<td>2-32</td>
			<td>2-33</td>
		</tr>
		</table>
	</body>
</html>

inline style “float: left” for the first table is only there for IE.

4

have done some additional work on the example i provided previously: targeted ie in a different way, as ie lower or equal than v7 doesn’t know about “inline-block”, also set the top vertical align for the tables.

<!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-Style-Type" content="text/css; charset=utf-8">
		<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8">
		<title>Conforming HTML 4.01 Strict Template</title>
		<style type="text/css">
			table { display: inline-block; vertical-align: top; border: 1px solid; }
		</style>
		<!--[if lte IE 7]>
			<style>
				table.ieh-fl { float: left; }
			</style>
		<![endif]-->
	</head>

	<body>
		<h1>Start demo</h1>
		<table class="ieh-fl">
		<tr>
			<td>1-11</td>
			<td>1-12</td>
		</tr>
		<tr>
			<td>1-21</td>
			<td>1-22</td>
		</tr>
		</table>
		
		<table>
		<tr>
			<td>2-11</td>
			<td>2-12</td>
			<td>2-13</td>
		</tr>
		<tr>
			<td>2-21</td>
			<td>2-22</td>
			<td>2-23</td>
		</tr>
		<tr>
			<td>2-31</td>
			<td>2-32</td>
			<td>2-33</td>
		</tr>
		</table>
		<h2>End demo</h2>
		<p>Author: noonnope@sitepoint</p>
	</body>
</html>

ieh-fl class means ie hack, float left. i’ve used the style element to keep things in one place. should you make a real page, you would separate the css from html, by putting a link elements in the head section, pointing at the css external files, having the style element content, and replace the style element in the commented ie section with a link pointing at the css file with hacks for ie only. :slight_smile:

5

You could place them inside two divs that are floated against eachother. Like this (I haven’t tested the code but try it out):

I would follow noonnope’s advise! Try not to mix div with tables, that’s bad practise.

6

Thanks for the heads-up, I’ll remember that from now on. :slight_smile:

7

I would go with noonnope’s solution, except I’d use inline-table rather than inline-block. It is common to declare a width and/or height for tables to set their initial sizes. If inline-block is used, the table’s natural ability to resize as needed to enclose its content is broken. The hack for IE6/7 would remain the same.

cheers,

gary

8

thanks for suggesting improvements gary ! noted and considered :slight_smile:

9

Instead of using tables in two different Rows just try it in two different columns in the same row and this will give you two adjacent tables as mentioned below…

<table width=“100%”>
<tr>
<td class=“box3_t”><table><tr><td></td></tr></table></td>
<td class=“box3_t”><table><tr><td></td></tr></table></td>
</tr>
</table>

10

Nesting TABLE elements is not good practice in the slightest, and can cause all sorts of issues with the contents, etc.