Solved

HTML Table alignment

Posted on 2009-05-19
16
368 Views
Last Modified: 2012-05-07
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
Comment
Question by:aman0711
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 3
  • 3
  • +1
16 Comments
 
LVL 12

Accepted Solution

by:
alien109 earned 250 total points
ID: 24422829
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
 
LVL 10

Assisted Solution

by:ollyatstithians
ollyatstithians earned 250 total points
ID: 24422907
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
 
LVL 10

Author Comment

by:aman0711
ID: 24423366
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:alien109
ID: 24423587
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
 
LVL 10

Author Comment

by:aman0711
ID: 24423636
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
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24423843
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
 
LVL 10

Author Comment

by:aman0711
ID: 24423883
So you mean, I should decrease the width of outer table?
0
 
LVL 12

Expert Comment

by:alien109
ID: 24425157
Not decrease width of the outer table, but increase the width of the inner tables. Change 81% to 98%, for example.
0
 
LVL 10

Author Comment

by:aman0711
ID: 24425207
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
 
LVL 10

Expert Comment

by:ollyatstithians
ID: 24429488
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
 
LVL 10

Author Comment

by:aman0711
ID: 24436334
Got it,

          Thanks folks :)
0
 
LVL 10

Author Comment

by:aman0711
ID: 25854641
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
 
LVL 10

Author Comment

by:aman0711
ID: 25854766
IMage replacement for  ID: 24423636

width.PNG
0
 
LVL 10

Author Comment

by:aman0711
ID: 25854808
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
 
LVL 10

Author Comment

by:aman0711
ID: 25854842
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
 

Expert Comment

by:ModernMatt
ID: 25856025
Code Snippets/Images removed and replaced by member request

ModernMatt
EE Moderator
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question