I have two headings using the same class/style with tables underneath them but it's making the site quite long after the tables. I was wondering if there is anyway to get the two titles/tables on the same line but one of the left and one on the right?

 

I would provide a link but it's kind of private.

 

Thanks.

If I understand the question correctly...

You want the 2 headers with the proceeding content side by side???

I guess you could create a container div larger enough to them both float one left and the other right, or place them each in their own div's.

Yes that is what I need to do. Can you provide any code that I could do this with?

 

I'm a newbie with code and stuff

I'm a newbie with code and stuff

 

Your 'Experience' says different: Experience: Web Guru

I thought that bit was to do with the bit underneath :s

 

I'll change it now then...

If your new to coding then I would suggest staying away from tables. In most cases there are considered a bad habbit to use.

It's just how the content was provided to me. It's not my own.

 

I can paste the code how it is if that will help anyone with how I can move them next to each other.

OK, I've managed to get them next to each other using a parent table with two cells. I've given the code for you to see.

 

<table width="100%" cellpadding="5" cellspacing="0">
 <tr>
   <td><table width="100%" cellpadding="5" cellspacing="0">
     <tr>
       <td><div class="cltitle"> </div></td>
       </tr>
     <tr>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
     </tr>
     </table>
   </td>
   <td>
   <table width="100%" cellpadding="5" cellspacing="0">
     <tr>
       <td><div class="cltitle"> </div></td>
       </tr>
     <tr>
       <td> </td>
       <td> </td>
       </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
   </table></td>
 </tr>
</table>

 

Right now, I need to be able to size the tables correctly and make a space between them but I'm not sure how...

 

I need table one on the left of the page and table two on the right side of the page. The cells are currently oversized and the two different contents in table two are too far away from each other.

 

Can anyone help?

Edited January 23, 201115 yr by MikeP

Please, this code is very painful

Unless you are using this in a database 'application' I would not recommend using tables. This is a very old school way of coding. Use CSS to format your HTML. I'm not going to give you the code because I believe you could figure it out yourself. Its not really that hard.

Create your info, place it in a unordered list, wrap all that in a div tag and float left or what ever, then repeat these steps for the other column.

Easy as pie

If you want to use two tables side by side you can style them like a div with a float:-

CSS

#wrap { width: 850px; margin: 0 auto; }
#table1 { float: left; width: 400px; }
#table2 { float: left; width: 450px; }

<div id="wrap">
<table id="table1"><tr><td>...</td></tr></table>
<table id="table2"><tr><td>...</td></tr></table>
</div>

 

I haven't looked at your code, the above is just the general principle.

 

Edit: in your code you've got a parent table width="100%" and two tables in two td cells but both are width="100%". There's no need to have a parent table and two tables in td cells.

Edited January 28, 201115 yr by Wickham

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>tables</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />


<style type="text/css">

table.left, table.right, table.divleft, table.divright, table.cont {width: 100%;}
table.left td, table.left th, table.divleft td, table.divleft th {background: #fafafa; border: 0; border-bottom: solid 1px #eee; text-align: center; padding: 5px;}

table.right td, table.right th, table.divright td, table.divright th  {background: #fafafe; border: 0; border-bottom: solid 1px #eef; text-align: center; padding: 5px;}

table.divleft, table.divright {width: 45%;}
table.divleft  {float: left;}
table.divright {float: right;}
</style>

</head>
<body>
<h2>Table layout</h2>

<table cellspacing="0" class="cont">
<tr>
	<td width="45%">
		<table cellspacing="0" class="left">
			<tr>
				<th colspan="2">Left Table</td>
			</tr>
			<tr>
				<td>word</td>
				<td>word</td>
			</tr>
			<tr>
				<td>word</td>
				<td>word</td>
			</tr>
		</table>
	</td>
	<td width="10%"> </td>
	<td width="45%" align="right">
		<table cellspacing="0" class="right">
			<tr>
				<th colspan="2">Left Table</td>
			</tr>
			<tr>
				<td>word</td>
				<td>word</td>
			</tr>
			<tr>
				<td>word</td>
				<td>word</td>
			</tr>
		</table>

	</td>
</tr>
</table>

<h2>DIV layout</h2>
<table cellspacing="0" class="divleft">
<tr>
	<th colspan="2">Left Table</td>
</tr>
<tr>
	<td>word</td>
	<td>word</td>
</tr>
<tr>
	<td>word</td>
	<td>word</td>
</tr>
</table>



<table cellspacing="0" class="divright">
<tr>
	<th colspan="2">Left Table</td>
</tr>
<tr>
	<td>word</td>
	<td>word</td>
</tr>
<tr>
	<td>word</td>
	<td>word</td>
</tr>
</table>
</body>
</html>