Link to home
Start Free TrialLog in
Avatar of aman0711
aman0711

asked on

HTML Table alignment

Hi Experts,

                 I need your help in aligning these tables. If you see the snap shot, the top and bottom tables are not aligned properly (I have drawn the lines)
                 Another thing I want to bring the tables on the right, closer to the left side tables.

                Below is the code I am using as of now.
<table border="0" width="100%">
<td valign="top">
<h5><span class="highlight2">Met</span></h5>
<table align="left" border="1" cellspacing="1" width="80%">
	<tr>
		<th>App</th> 
		<th align="center">Met</th>
		<th align="center">Metr</th>
		<th align="center">Tot</th>
		<th align="center">comp</th>
		
	</tr>
 
	<tr>
		<td></td>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		<td class="tab_5Col"></td>
	</tr>
 
	<tr>
		<td><b>Total</b></td>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		<td class="tab_5Col"></td>
	</tr>
	
 
</table>
</td>
<td>
<td valign="top">
<h5><span class="highlight2">Ti</span></h5>
<table align="left" border="1" cellspacing="1" width="81%">
	<tr>
		<th align="center">T</th>
		<th align="center">o</th>
		<th align="center">O </th>
				
	</tr>
	
	<tr>
				
		<td class="tab_2Col"></td>
	    <td></td>
        <td></td>
		
	</tr>
	<tr>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		
		
	</tr>
	
 
</table>
</td>
</table>
 
 
<table border="0" align="left" width="100%" cellspacing=5>
<td valign="top">
<table border="1" align="left" cellspacing="1" bgcolor="#FFFFFF" WIDTH=81.5%>
	<tr>
		<th>Asp</th>
		<th align="center">Met</th>
		<th align="center">Met</th>
		<th align="center">Tot</th>
		<th align="center">com</th>
	</tr>
	<tr>
 
		<td></td>
			
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
 
	   <tr>
		<td><b>Tot</b></td>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		<td class="tab_5Col"></td>
	</tr>
 
</table>
</td>
<td>
<td valign="top">
<table border="1" align="left" cellspacing="1" width="81%">
	<tr>
		<th align="center">T</th>
		<th align="center">o</th>
		<th align="center">O</th>
				
	</tr>
 
	<%
	while (rs4.next()) {
	%>
	<tr>
				
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
        <td></td>
	</tr>
 
	<tr>
		<td class="tab_2Col" ></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		
		
	</tr>
 
</table>
</td>
</table>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of alien109
alien109
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of ollyatstithians
ollyatstithians
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of aman0711
aman0711

ASKER

Hi Folks,

                Thanks for your help. This is where it took me. Everything is perfectly aligned.
         
               >> I want to bring the tables on the right close on left ones, with a small gap in between. (Can I control this gap?)

 

new1.PNG
Avatar of alien109
alien109
Flag of United States of America image
The gap you are seeing is a result of setting the inner tables width to 81%. This will set the width to 81% of the parent container. You can increase this value and it will close the gap.


Avatar of aman0711
aman0711

ASKER

Hi Alien,

               so that way my table would stretch out and fills the gap.

               There is no way to bring right side tables closer to left ones, Something like the attached snapshop. (That is what I am looking for)
Avatar of ollyatstithians
ollyatstithians
Flag of United Kingdom of Great Britain and Northern Ireland image
The outer table cell should shrink as a result of changing the width % of the inner table, so the result should be what you want.

Olly.
Avatar of aman0711
aman0711

ASKER

So you mean, I should decrease the width of outer table?
Avatar of alien109
alien109
Flag of United States of America image
Not decrease width of the outer table, but increase the width of the inner tables. Change 81% to 98%, for example.
Avatar of aman0711
aman0711

ASKER

Cool, Got it thanks :-)
you guys are great....

    oops one last thing, Is it possible by any means we could put in some color, between left side and right tables (GAp between the two)
Avatar of ollyatstithians
ollyatstithians
Flag of United Kingdom of Great Britain and Northern Ireland image
Colour where exactly? You need to decide which element you want coloured.
You could colour the outer table background to give you a background behind all the inner tables. Don't forget to set the inner table backgrounds back to white though.

Olly.
Avatar of aman0711
aman0711

ASKER

Got it,

          Thanks folks :)
Avatar of aman0711
aman0711

ASKER

Code and image to be replaced in the question body:



<table border="0" width="100%">
<td valign="top">
<h5><span class="highlight2">Met</span></h5>
<table align="left" border="1" cellspacing="1" width="80%">
	<tr>
		<th>App</th> 
		<th align="center">Met</th>
		<th align="center">Metr</th>
		<th align="center">Tot</th>
		<th align="center">comp</th>
		
	</tr>
 
	<tr>
		<td></td>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		<td class="tab_5Col"></td>
	</tr>
 
	<tr>
		<td><b>Total</b></td>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		<td class="tab_5Col"></td>
	</tr>
	
 
</table>
</td>
<td>
<td valign="top">
<h5><span class="highlight2">Ti</span></h5>
<table align="left" border="1" cellspacing="1" width="81%">
	<tr>
		<th align="center">T</th>
		<th align="center">o</th>
		<th align="center">O </th>
				
	</tr>
	
	<tr>
				
		<td class="tab_2Col"></td>
	    <td></td>
        <td></td>
		
	</tr>
	<tr>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		
		
	</tr>
	
 
</table>
</td>
</table>
 
 
<table border="0" align="left" width="100%" cellspacing=5>
<td valign="top">
<table border="1" align="left" cellspacing="1" bgcolor="#FFFFFF" WIDTH=81.5%>
	<tr>
		<th>Asp</th>
		<th align="center">Met</th>
		<th align="center">Met</th>
		<th align="center">Tot</th>
		<th align="center">com</th>
	</tr>
	<tr>
 
		<td></td>
			
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
 
	   <tr>
		<td><b>Tot</b></td>
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		<td class="tab_5Col"></td>
	</tr>
 
</table>
</td>
<td>
<td valign="top">
<table border="1" align="left" cellspacing="1" width="81%">
	<tr>
		<th align="center">T</th>
		<th align="center">o</th>
		<th align="center">O</th>
				
	</tr>
 
	<%
	while (rs4.next()) {
	%>
	<tr>
				
		<td class="tab_2Col"></td>
		<td class="tab_3Col"></td>
        <td></td>
	</tr>
 
	<tr>
		<td class="tab_2Col" ></td>
		<td class="tab_3Col"></td>
		<td class="tab_4Col"></td>
		
		
	</tr>
 
</table>
</td>
</table>

Open in new window

Align.PNG
Avatar of aman0711
aman0711

ASKER

IMage replacement for  ID: 24423636

width.PNG
Avatar of aman0711
aman0711

ASKER

Code for ID: 24422829

<table border="1" width="100%">
	<tr>
		<td valign="top">
			<h5><span class="highlight2">Met</span></h5>
			<table align="left" border="1" cellspacing="1" width="81%">
				<tr>
					<th>App</th>
					<th align="center">Met</th>
					<th align="center">Metr</th>
					<th align="center">Tot</th>
					<th align="center">comp</th>
				</tr>
				<tr>
					<td></td>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
					<td class="tab_5Col"></td>
				</tr>
				<tr>
					<td><b>Tot</b></td>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
					<td class="tab_5Col"></td>
				</tr>
			</table>
		</td>
		<td valign="top">
			<h5><span class="highlight2">Ti</span></h5>
			<table align="left" border="1" cellspacing="1" width="81%">
				<tr>
					<th align="center">T</th>
					<th align="center">o</th>
					<th align="center">O </th>
				</tr>
				<tr>
					<td class="tab_2Col"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
				</tr>
			</table>
		</td>
	</tr>
 
	<tr>
		<td valign="top">
			<table align="left" border="1" cellspacing="1" width="81%">
				<tr>
					<th>Asp</th>
					<th align="center">Met</th>
					<th align="center">Met</th>
					<th align="center">Tot</th>
					<th align="center">com</th>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Total</b></td>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
					<td class="tab_5Col"></td>
				</tr>
			</table>
		</td>
		<td valign="top">
			<table border="1" align="left" cellspacing="1" width="81%">
				<tr>
					<th align="center">T</th>
					<th align="center">o</th>
					<th align="center">O</th>
				</tr>
				<tr>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td></td>
				</tr>
				<tr>
					<td class="tab_2Col" ></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Open in new window

Avatar of aman0711
aman0711

ASKER

replacement code for  ID: 24422907

<table border="0" width="100%">
	<tr>
		<td valign="top" width="80%"> <!-- width attribute added -->
			<h5><span class="highlight2">Met</span></h5>
			<table align="left" border="1" cellspacing="1" width="80%">
				<tr>
					<th>App</th> 
					<th align="center">Met</th>
					<th align="center">Metr</th>
					<th align="center">Tot</th>
					<th align="center">comp</th>
				</tr>
				<tr>
					<td></td>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
					<td class="tab_5Col"></td>
				</tr>
				<tr>
					<td><b>T</b></td>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
					<td class="tab_5Col"></td>
				</tr>
			</table>
		</td>
		<td></td>
		<td valign="top">
			<h5><span class="highlight2">Ti</span></h5>
			<table align="left" border="1" cellspacing="1" width="80%">
				<tr>
					<th align="center">T</th>
					<th align="center">o</th>
					<th align="center">O</th>
				</tr>
				<tr>
					<td class="tab_2Col"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<table border="0" align="left" width="100%"> <!-- cellspacing attribute removed -->
	<tr>
		<td valign="top" width="80%"> <!-- width attribute added -->
			<table border="1" align="left" cellspacing="1" bgcolor="#FFFFFF" WIDTH="80%">
				<tr>
					<th>Asp</th>
					<th align="center">Met</th>
					<th align="center">Met</th>
					<th align="center">Tot</th>
					<th align="center">comp</th>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td><b>Total</b></td>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
					<td class="tab_5Col"></td>
				</tr>
			</table>
		</td>
		<td></td>
		<td valign="top">
			<table border="1" align="left" cellspacing="1" width="80%">
				<tr>
					<th align="center">T</th>
					<th align="center">o</th>
					<th align="center">O</th>
				</tr>
				<tr>
					<td class="tab_2Col"></td>
					<td class="tab_3Col"></td>
					<td></td>
				</tr>
				<tr>
					<td class="tab_2Col" ></td>
					<td class="tab_3Col"></td>
					<td class="tab_4Col"></td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Open in new window

Avatar of ModernMatt
ModernMatt
Flag of United Kingdom of Great Britain and Northern Ireland image
Code Snippets/Images removed and replaced by member request

ModernMatt
EE Moderator