Solved

HTML Table alignment

Posted on 2009-05-19
16
343 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
  • 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

759 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now