Placing Two tables side by side with CSS

**dcr33** · 07-14-2011, 04:02 PM

I want to place two tables side-by-side in the same row with CSS but I can't.
What is wrong with the below code?

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div #tablecontainer
{
postion:relative;}

#t1
{ 
width:500px;
height:200px;
 border:3px solid black ;
    }  

 <!-- 2nd table in row styles -->
 
 #t2
{ 
 left:600px;
  width:500px;
height:200px;
 border:3px solid black ;
   }  

</style>

</head>

<body>
<div id="tablecontainer">
    <!-- Table 1 markup-->
    <table  id="t1">
      <tr>
         <td>1</td>
		  <td>1</td>
      </tr>
	  
   <tr>
       <td>1</td>
	    <td>1</td>
      </tr>
  </table>
	
    <!-- Table 2 markup-->
<table id="t2"> 
 <tr>  
                   <td>1</td>
      			  <td>1</td>			 
  </tr> 
  <tr>
	    <td>1</td>
		<td>1</td>
	</tr>					 
</table>  
</div>
</body>
</html>

Actually I want to create the following layout shown in the attached picture.
I tried for the last 5 hours till my eyes are now burning. I have failed!!
How to do that?
Seniors Please Help me.
Thanks

**deathbycheese** · 07-14-2011, 07:15 PM

Try this:

Code:

<style type="text/css">
div #tablecontainer
{
postion:relative;}

#t1, #t2 {
width:500px;
height:200px;
border:3px solid black ;
}
#t1
{ 
float:left;
    }  

 <!-- 2nd table in row styles -->
 
 #t2
{ 
float:right   }  

</style>

dbc

**dcr33** · 07-15-2011, 09:58 PM

Hi deathbyceese

Thanks .But that isn't the code that gives the picture in the figure!!

Also note that float cannot be used since there is maximum gap of say, 5px between the tables.

**CChawps** · 07-24-2011, 06:59 AM

Hey, hope this'll work, tho it might not be the right dimension I used for each table:

Code:

<style>
#wrap {
	width: 340px;
}

#wrap table {
	display: block;
	float: left;
	width: 150px;
	border: 1px solid #000;
	border-bottom: 0;
	margin: 5px;
}

#wrap table td {
	border-bottom: 1px solid #333;
	width: 150px;
}
</style>

<div id="wrap">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</div>

Should look like:

Regards Toby

Thread: Placing Two tables side by side with CSS

Thread Tools

Search Thread

Placing Two tables side by side with CSS

Bookmarks

Bookmarks

Posting Permissions