SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    733
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to place two tables side by side

    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

    Code:
    <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. #2
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could place them inside two divs that are floated against eachother. Like this (I haven't tested the code but try it out):

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

    Code:
    .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. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another way, no divs.

    HTML Code:
    <!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. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    HTML Code:
    <!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.

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    I would follow noonnope's advise! Try not to mix div with tables, that's bad practise.
    Thanks for the heads-up, I'll remember that from now on.

  7. #7
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for suggesting improvements gary ! noted and considered

  9. #9
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    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

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

    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. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Nesting TABLE elements is not good practice in the slightest, and can cause all sorts of issues with the contents, etc.


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
  •