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 Mike Lewis 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
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
This is probably because the cell's vertical alignment is set to 'middle' or 'default'. In the html code find the cell which is moving down and make sure the tag looks like this:

<td valign=&quot;top&quot;>

This will keep the cell's contents at the top of the cell regardless of content length in adjacent cells.

In regards to tables or layers, I would stick with tables because they are pretty much as flexible as layers when used well, and more well supported across different browsers. Remember you can nest entire tables within table cells giving you a huge amount of flexibility.

Hope this helps! Nick (Software Developer)


nick@retrographics.fsnet.co.uk
nick.price@myenable.com
 
Upvote 0 Downvote
If you post the code, I'm sure someone could give you more specific advice. I find that tables can jump around a bit and a certain amount of trial and error is involved, especially with cells that need to grow a little. Here's a workaround.

Create an extra column that contains nothing but transparent gifs. Use these to specify the heights of each row. Now add an extra row somewhere around where your text cell is and keep generic data in it (such as a background image that scales to any size). Er... sort of hard to explain, but post a link to your code and I can show you the changes you need to make.
 
Upvote 0 Downvote
Thanks for your ideas, but it didn't work. Here's the code for the Web page:

<!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
Whoops, forgot to mention that it's the word &quot;Services&quot; that is pushed down the left column when text is added to the middle column that starts with &quot;content goes here&quot;.

Any ideas how to fix this?

Thanks,

May
 
Upvote 0 Downvote
See the line

<td width=&quot;125&quot;><!-- sub-menu table -->

Change this to

<td width=&quot;125&quot; valign=&quot;top&quot;><!-- sub-menu table -->
 
Upvote 0 Downvote
Also, just for the sake of more valid code, you should change this section:
Code: 
       <td>
            <!-- left vert line -->
            <td bgcolor=&quot;#808080&quot; width=&quot;1&quot; nowrap></td>
        </td>

I'm pretty sure a td inside a td is not a legal practice.

-Tarwn Experts are only people who have realized how much they will never know about a language.
________________________________________________________________________________
Want to get great answers to your Tek-Tips questions? Have a look at faq333-2924
 
Upvote 0 Downvote
blueark, you're a genius!!
Tarwn, well spotted! Changed & working.

I spent nearly 2 hours looking over this code and didn't spot either of those... doh!

What do you guys think of using CSS layers? I just read a Web page that suggested that tables are the old way of doing things and for finer control we should be using <DIV> tags with absolute positioning in style sheets.

Thanks,

May
 
Upvote 0 Downvote
Scrap that last question. I found the answer in this forum:

thread253-393636
 
Upvote 0 Downvote
Hi mate,

Another point you should note is that you should never have empty cells.

Always add &amp;nbsp; to an empty cell.

Hope this helps Wullie

- Send your e-mail to santa!! [santa]

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell
 
Upvote 0 Downvote
Hi Wullie,

Why shouldn't I ever have an empty cell? If I add a non-breaking space to an empty cell, isn't it going to increase the column width?

Thanks,

May
 
Upvote 0 Downvote
Hi mate,

An empty cell is totally pontless, it has no use and is rendered differently in different browsers.

Either add  &amp;nbsp;  or a single pixel transparent gif.

Hope this helps
Wullie

- Send your e-mail to santa!! [santa]

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

javierdlm001
  • Locked
  • Question
Need advise to layout webfolio
Replies
0
Views
63
javierdlm001
javierdlm001
mwebbo1
  • Locked
  • Question
layout overlapping
Replies
1
Views
66
darryncooke
darryncooke
c0deM0nK424
  • Locked
  • Question
Joomla Installation problem - Could not connect to the database ?
Replies
3
Views
116
ChrisHirst
ChrisHirst
audiopro
  • Locked
  • Question
A Curious Problem With Chrome 2
Replies
3
Views
91
audiopro
audiopro
dagoat10
  • Locked
  • Question
Inner Tables
Replies
2
Views
62
BillyRayPreachersSon
BillyRayPreachersSon

Part and Inventory Search

Sponsor

Back
Top