Having a bit of trouble with table cells stretching

Forum Moderators: open

Message Too Old, No Replies

Having a bit of trouble with table cells stretching

CSS designer "gone slumming" into tables... knows nothing

Don_Hoagie

2:15 pm on May 4, 2006 (gmt 0)

As the byline states, I've been doing CSS layouts so long that any knowledge I had of tables has gone out the window... so bear with me.

I'm doing this three column layout (middle column contains nested tables, entire layout uses px- not %, no heights have been defined), and the two side columns happen to have about 1200 vertical pixels of content. So, why is my center column(which is only about 500px worth of content in height) stretching all its containers to cover that 1200px area? I've plastered the infamous "valign=top" about everywhere you could put it, and nothing's changing.

It's obviously some relation to the side columns because if i cut them down to like 300px of vertical content, the page looks fine and dandy.

what the hay?

treeline

3:00 pm on May 4, 2006 (gmt 0)

The most annoying problem with using DIV's is they don't do this.

If a table has three columns, they will all be the same height. Always.

So if one column acquires more content, making it stretch taller, the other two will "keep up" or match it. Automatically. Cool, huh? So much simpler to line up a design.

Now there are games you can play with colspan or combinations of tables to mimic CSS stuff, but if you're too elegant for the slums, why play there?

Don_Hoagie

3:23 pm on May 4, 2006 (gmt 0)

Perhaps some well-deserved jabs there treeline... or perhaps my sarcasm about the snobbery of CSS pundits was a bit unclear. Nevertheless, trust that if I were the one with the say on how this page is to be constructed, I wouldn't be plugging tables into it.

I'm not trying to mimic divs at all. It had become my understanding that the table behavior you speak of applied only to the remainder areas of cells. It seems much less reasonable to me for a cell to spread out its entire content area than for it to simply add space where there is no content.

My thinking was that if the center column was pink, then the pink background would indeed stretch to 1200px... that's fine and makes sense to me. But why should my content inside that column, which has specifically been told to have a top margin and padding of zero, and have the magical valign=top, be pushed downwards at all, ever, for any reason?

I had forgotten about the colspan attribute... but if my side columns are 1200px long and only take up one column of space, I don't see that helping... I suppose the advice here to is to divvy up those 1200px columns into smaller columns, which I could then reference when i apply colspans to the center content?

treeline

3:56 pm on May 4, 2006 (gmt 0)

What type of content is in the center column? An image, text, nested table, combo?

It's hard to picture just what "cell content" is stretching.

Sometimes tables or cells have default values that tend to center things. Not sure what's happening here from the description yet.

encyclo

4:03 pm on May 4, 2006 (gmt 0)

Any chance of the markup and CSS for a test page which shows the phenomenon? You may have a rule which is forcing the browser to stretch the content (not sure what you mean, is it the text which is spread out down to the bottom margin?), for example a margin-bottom of zero. It is difficult to say without an example. :)

Also are you hand-coding the tables? Are you using XHTML or HTML syntax, and does it validate? Don't forget that in HTML the

</td>

is iptional so a page can validate as HTML but it has "extra" cells because there is a

<td>

instead of a

</td>

Generally-speaking, if you use

valign="top"

then the text should stay at the top of the cell, with empty space underneath to the length of the longest cell.

jessejump

4:06 pm on May 4, 2006 (gmt 0)

>>>>>> But why should my content inside that column, which has specifically been told to have a top margin and padding of zero, and have the magical valign=top, be pushed downwards at all, ever, for any reason?

It shouldn't.
What's the code from the middle TD to the close of that TD?

Don_Hoagie

4:26 pm on May 4, 2006 (gmt 0)

Yes apologies, I should've been more informative about the actual contents of the center column. It's a thumbnail gallery post, which is why I wasn't chomping at the bit to discuss its contents.

The code and doctype are 4.01 Trans, and the only types of validation errors (though there are many) are ALT attributes missing and invalid characters in URL structures (affiliate links as you may know are often a bit unreasonable). I used a WYSIWYG to draw the table, and then went into the HTML to get rid of the wackiness. The way the table was generated could of course be the issue... if so, I apologize. I don't usually use WYSIWYG editors either.

I'm not sure if i'm helping or hurting by posting this code after my attempts to take out the piles of specific info in it... but here she be. The sections of thumbnails, along with one or two free-standing banner images also contained in the center, are the items that are being spaced out to the end of eternity. Again, I don't see this problem when there is a small amount of content in the sidebars (the 180px columns)... only when those columns grow to a length longer than the center. Thanks again for any help.

jessejump

5:59 pm on May 4, 2006 (gmt 0)

>>>> <td colspan="3" height="150">
<img src="-" style="margin: 0; padding: 0; border: 0;">
</td>

Why not just make this a separate table - leave out the spanning -
and put a second table (with no spanning) right beneath that holds the rest?

Table
Table

Don_Hoagie

7:14 pm on May 4, 2006 (gmt 0)

Hrmm... I guess I don't see how that would change anything for the better... that's the header section of the page, which currently seems to be the only thing that ISN'T miscommunicating with the rest of the page. How would that change the fact that, in the columns below the header, the center column's content is at the whim of the side columns?

lexipixel

9:03 pm on May 4, 2006 (gmt 0)

Are you saying the image (thumbnails) are spreading out vertically to occupy all the height of a single TD (cell/column)?

Have you tried setting BORDER="1" in the TABLE tag... that will show borders and let you see what is where.

Another setting that could be affecting the layout (if it's all IMG tags) is to explicitly set the HSPACE= and VSPACE= paramters on the IMG tags...

treeline

9:18 pm on May 4, 2006 (gmt 0)

It's still unclear to me what the problem looks like. I guess you've got a bunch of thumbnails, possibly with a title for each, no matter.

Do you want all the images clustered at the top of the page? Grouped 3 across and they shift to 1 across? Are there huge gaps between rows?
What's the mess look like?

encyclo

1:05 am on May 5, 2006 (gmt 0)

There's a lot of

rowspan

and

colspan

going on, if you are going down the tables route then you might as well do a simple one table layout and nest a second table in the center column for the content. Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test template</title>
</head>
<body>
<!-- BEGIN outer table -->
<table border="1" cellpadding="0" cellspacing="0" width="860" align="center" style="background-color:#eef;">
<tr>
<td colspan="3" height="150">
<p>top section</p>
</td>
</tr>
<tr>
<td width="180" valign="top">
<p style="margin-bottom:1000px;"><img src="image.jpg" alt="">left column</p>
</td>
<td width="500" valign="top">
<h1>h1 here</h1>
<!-- BEGIN inner table -->
<table border="1" cellpadding="0" cellspacing="0" width="470" align="center" style="background-color:#fee;">
<tr>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
</tr>
<tr>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
</tr>
<tr>
<td colspan="5"><img src="image.jpg" width="470" height="60" alt=""></td>
</tr>
<tr>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
</tr>
<tr>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
<td><img src="image.jpg" alt=""></td>
</tr>
</table>
<!-- END inner table -->
</td>
<td width="180" valign="top">
<p style="margin-bottom:1000px;"><img src="image.jpg" alt="">rh column</p>
</td>
</tr>
</table>
<!-- END outer table -->
</body>
</html>

The center column uses

valign="top"

and the contents are independent of the outer table. (Colors, borders and margins added for clarity.)

Tables built by WYSIWYG tools are usually badly-done, buggy and over-complicated - I use my editor's code generation tools to build the basic tables and then tweak by hand.

Don_Hoagie

2:56 pm on May 5, 2006 (gmt 0)

Thanks encyclo, I will give your code a try... FYI, your layout suggestion is precisely what I attempted to do with the WYSIWYG, and we see what the result was with that mess. Who knows, perhaps I zigged when I should've zagged when drawing out the tables, but then again, the purpose of a WYSIWYG IS to write the code to complement what you see on the page. I blame Bill Gates.

Thanks to all for your help folks, as always