Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

tables layout problem

Status
Not open for further replies.
may1hem

may1hem

Programmer
Jul 28, 2002
262
0
0
GB
I'm coding a Web page using tables for layout and have found that whenever I add more text to one column then the stuff in another column moves down the page, leaving a white gap above it. Is this a standard problem with HTML tables? Any ideas how to fix it? Do you need to see the code?

What's the best coding method to lay out a Web page reliably? Layers? Tables? Other method?

Thanks for your help,

May
 
Sort by date Sort by votes
I think I know the problem you are having. You need to align the particular table row to the top like this:

<TABLE COLS=2 WIDTH=300>
<TR VALIGN=TOP>
<TD WIDTH=150>something here</TD>
<TD WIDTH=150>something else here</TD>
</TR>
</TABLE>
Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Upvote 0 Downvote
Thanks for the idea, Tony, but it didn't work. Here's the code for the Web page. When I add text to the middle column then the word &quot;Services&quot; in the left column gets pushed down. Any other ideas?

Thanks,

May

--------------


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<html>
<head>
<title>table problem</title>
</head>

<body>

<table width=&quot;700&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;>
<tr>
<td>
<!-- left vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
</td>
<td width=&quot;125&quot;><!-- sub-menu table -->
<table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot; border=&quot;0&quot;>
<tr>
<td width=&quot;125&quot; height=&quot;30&quot; bgcolor=&quot;#85AEF3&quot; class=&quot;submenutext&quot; align=&quot;left&quot; valign=&quot;middle&quot; nowrap>Services</td>
</tr>
<tr>
<td bgcolor=&quot;#808080&quot; height=&quot;2&quot; nowrap></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;link1.asp&quot; class=&quot;submenulink&quot;>link1</a></td>
</tr>
</table>
</td>
<td>
<!-- right vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
</td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;433&quot; valign=&quot;top&quot;>
<table width=&quot;433&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- asp content table -->
<tr><td height=&quot;15&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;15&quot; alt=&quot;&quot; border=&quot;0&quot;></td></tr>
<tr valign=&quot;top&quot;>
<td valign=&quot;top&quot; class=&quot;normaltext&quot;>ASP content goes here<br><br><br>sample content on it's way<br><br><br>more content<br><br>and more</td>
</tr>
</table>
</td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;100&quot; valign=&quot;top&quot;>
<table width=&quot;100&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- rhs buttons table -->
<tr>
<td height=&quot;10&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;10&quot; alt=&quot;&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td valign=&quot;top&quot; align=&quot;right&quot;><img src=&quot;samplebtntr.gif&quot; width=&quot;90&quot; height=&quot;60&quot; alt=&quot;&quot; border=&quot;1&quot;></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
 
Upvote 0 Downvote
Tony was correct. You need to add the valign=top to the td tag where you have the comment sub-menu. Since your navigation table is inside that cell.

Dan
 
Upvote 0 Downvote
Hi mayhem1

Try this:


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<html>
<head>
<title>table problem</title>
</head>

<body>

<table width=&quot;700&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;>
<tr>
<td valign=&quot;top&quot;>
<!-- left vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
<td width=&quot;125&quot; valign=top><!-- sub-menu table -->
<table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot; border=&quot;0&quot;>
<tr>
<td width=&quot;125&quot; height=&quot;30&quot; bgcolor=&quot;#85AEF3&quot; class=&quot;submenutext&quot; align=&quot;left&quot; valign=&quot;top&quot; nowrap>Services</td>
</tr>
<tr>
<td bgcolor=&quot;#808080&quot; height=&quot;2&quot; nowrap></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
<tr>
<td valign=&quot;top&quot; nowrap><a href=&quot;Link1.asp&quot; class=&quot;submenulink&quot;>Link1</a></td>
</tr>
</table>
</td>
<td>
<!-- right vert line -->
<td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;433&quot; valign=&quot;top&quot;>
<table width=&quot;433&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- asp content table -->
<tr><td height=&quot;15&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;15&quot; alt=&quot;&quot; border=&quot;0&quot;></td></tr>
<tr valign=&quot;top&quot;>
<td valign=&quot;top&quot; class=&quot;normaltext&quot;>ASP content goes here
<p><br>sample content on it's way<br><br><br>more content<br><br>and more
</td>
</tr>
</table>
</td>
<td width=&quot;20&quot; nowrap><!-- spacer --></td>
<td width=&quot;100&quot; valign=&quot;top&quot;>
<table width=&quot;100&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;><!-- rhs buttons table -->
<tr>
<td height=&quot;10&quot;><img src=&quot;1x1trans.gif&quot; width=&quot;1&quot; height=&quot;10&quot; alt=&quot;&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td valign=&quot;top&quot; align=&quot;right&quot;><img src=&quot;samplebtntr.gif&quot; width=&quot;90&quot; height=&quot;60&quot; alt=&quot;&quot; border=&quot;1&quot;></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>


Hope this help

Nook6
 
Upvote 0 Downvote
Thanks guys! It's amazing what a 2nd pair of eyes can do!!

It works beautifully now,

May
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
64
tyutghf
tyutghf
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
154
PeDa
PeDa
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
57
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
56
Carlvic
Carlvic
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
72
Katerine
Katerine

Part and Inventory Search

Sponsor

Back
Top