467,074 Members | 912 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

HTML table alignmenst do not horizontally align with each other.

Hello,

I have a table with each <td> has four links in it. There are five cells(i.e <td>) like this and requirement is to align them horizontally on a tabbed panel menu bar. The issue is first two cells align just fine, but later three do not align and show one or two level down.

I have checked valign table properties, removed all margins and padding but still no luck.

Below is the complete html code. Pleaes view this html output from left to right to get a clear picture.

Thanks,

Ruchir
[html]
<html>
<table cellspacing="0" cellpadding="0" width="100%" align="left"
bgcolor="#ffffff"
style="vertical-align:baseline; text-align:left; margin:auto;">
<tr>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l1">History</a> </li>
<li class="link"> <a class="link" href="#" id="l2">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l3">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l4">Our Approach</a> </li>
</ul>*
</td>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l5">History</a> </li>
<li class="link"> <a class="link" href="#" id="l6">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l7">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l8">Our Approach</a> </li>
</ul>*
*</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l9">History</a> </li>
<li class="link"> <a class="link" href="#" id="l10">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l11">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l12">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l13">History</a> </li>
<li class="link"> <a class="link" href="#" id="l14">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l15">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l16">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l17">History</a> </li>
<li class="link"> <a class="link" href="#" id="l18">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l19">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l20">Our Approach</a> </li>
</ul>*
</td>
</tr>
</table>
</html>[/html]
Feb 2 '08 #1
  • viewed: 2039
Share:
3 Replies
drhowarddrfine
Expert 4TB
It's the asterisks you are starting the cells with.
Feb 2 '08 #2
It's the asterisks you are starting the cells with.
Hi drhowarddrfine.

This is little surprising. I never put any asterisks in the code snippet I pasted. I am not sure from where it came :(

Anyways, I am repasting the same code below. This time without asterisks. Unfortunately the problem still persists.

Thank you so much for your time in reading this post.

Thanks,
Ruchir

<table cellspacing="0" cellpadding="0" width="100%" align="left"
bgcolor="#ffffff"
style="vertical-align:baseline; text-align:left; margin:auto;">
<tr>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l1">History</a> </li>
<li class="link"> <a class="link" href="#" id="l2">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l3">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l4">Our Approach</a> </li>
</ul>*
</td>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l5">History</a> </li>
<li class="link"> <a class="link" href="#" id="l6">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l7">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l8">Our Approach</a> </li>
</ul>*
*</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l9">History</a> </li>
<li class="link"> <a class="link" href="#" id="l10">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l11">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l12">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l13">History</a> </li>
<li class="link"> <a class="link" href="#" id="l14">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l15">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l16">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l17">History</a> </li>
<li class="link"> <a class="link" href="#" id="l18">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l19">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l20">Our Approach</a> </li>
</ul>*
</td>
</tr>
</table>
Feb 3 '08 #3
drhowarddrfine
Expert 4TB
Please use code tags using the buttons located above the posting area and briefly mentioned on the right side.

Your last post still has the asterisk but removing them has everything line up.
Feb 3 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

10 posts views Thread by Rithish | last post: by
3 posts views Thread by CalSun | last post: by
3 posts views Thread by steve_barker333@hotmail.com | last post: by
2 posts views Thread by justplain.kzn@gmail.com | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.