• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 380
  • Last Modified:

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

0
aman0711
Asked:
aman0711
  • 9
  • 3
  • 3
  • +1
2 Solutions
 
alien109Commented:
You had inconsistent widths on your inner tables, extra cell tags, and your lower tables were not included in your "layout" table. I've fixed the html and formatted it for you. Please try the code below and let me know if this is what you were looking for.

Just as a side note, it would highly recommend proper indentation in your code. Especially if you are going to do table nesting and what not. It makes it much easier to debug!
<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

0
 
ollyatstithiansCommented:
The first thing you should do is check that your html is valid. Invalid html can lead to all kinds of unexpected problems and inconsistencies. I'll let you do that, but there are several errors in that snippet.

The problems that are causing the mis-alignment are as follows:
 * You have specified cellspacing in the lower outermost table, but not the upper.
 * You have specified a width for the inner table relative to its parent (the td it is contained in), but not a width for the parent itself.

I have attached revised snippet.

Olly.

<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

0
 
aman0711Author Commented:
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
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
alien109Commented:
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.


0
 
aman0711Author Commented:
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)
0
 
ollyatstithiansCommented:
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.
0
 
aman0711Author Commented:
So you mean, I should decrease the width of outer table?
0
 
alien109Commented:
Not decrease width of the outer table, but increase the width of the inner tables. Change 81% to 98%, for example.
0
 
aman0711Author Commented:
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)
0
 
ollyatstithiansCommented:
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.
0
 
aman0711Author Commented:
Got it,

          Thanks folks :)
0
 
aman0711Author Commented:
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
0
 
aman0711Author Commented:
IMage replacement for  ID: 24423636

width.PNG
0
 
aman0711Author Commented:
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

0
 
aman0711Author Commented:
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

0
 
ModernMattCommented:
Code Snippets/Images removed and replaced by member request

ModernMatt
EE Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 9
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now