By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

HTML table alignmenst do not horizontally align with each other.

P: 2
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
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
It's the asterisks you are starting the cells with.
Feb 2 '08 #2

P: 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 5K+
P: 7,435
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.