• 0

Problems with tables


Question

Hey all...

So i have this page, a page that MUST be made using tables as the core structure... no ifs/ands or buts about it...

Here it my table structure.

<table width="980">
    <tr id="header">
        <td width="30"></td>
        <td width="100%"></td>
        <td width="30"></td>
    </tr>
    <tr id="body">
        <td width="30"></td>
        <td width="100%"></td>
        <td width="30"></td>
    </tr>
    <tr id="footer">
        <td width="30"></td>
        <td width="100%"></td>
        <td width="30"></td>
    </tr>
</table>

Now that's ugly... but it's a basic wireframe of my issue... the reason for the width="100%" is that the #body td that's 100% is made to expand depending on what's put in... so I need the entire table to expand, btu keeping the 1st and last cell's in each row to stay @ 30px, while ONLY hte middle column expands... this I've gotten, no problem.

The problem is... is in the first and last cell's of #body row... I need 3 images... a top image, a bottom image, and a repeating image (vertical) in the middle... I've tried with divs, but since the height of that cell can expand, I couldn't get the repeating to go all the way... now yes I could do bgimage on the cell, but the other images have some transparency and I don't want the repeating image to show under the top and bottom image.

Now I just went and tried to put this in the first and last #body row tds.

<table height="100%">
    <tr>
         <td height="200"><img blah blah height="200"></td>
    </tr>
    <tr height="100%">
      <td height="100%" bgimage="src">
         <img src="spacer" height="100%">
      </td>
     </tr>
    <tr>
         <td height="200"><img blah blah height="200"></td>
    </tr>
</table>

Now the problem with this is that the table doesn't go to 100% of the cell height... it's really just 430 px's high (2x200, and the spacer is going to 30x30 i've noticed)... so when the table the #body row is taller then 430pxs, the table doesn't stretch all the way in that cell.

I know this layout is ugly... I know this post may be a bit confusing... but if anyone can help that would be great :)

Basically I want a table to be 100% height of a variable height cell (without using javascript).

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

You'd have to use CSS to get the 100% height going on.

 html, body {
 height: 100%;
 }

Can I ask WHY it has to be tables? Is it for an assignment or something? What are you trying to accomplish?

Link to comment
Share on other sites

  • 0

You'd have to use CSS to get the 100% height going on.

 html, body {
 height: 100%;
 }

Can I ask WHY it has to be tables? Is it for an assignment or something? What are you trying to accomplish?

Company I work for... they have software for making surveys... the skin requires it to be in tables because they're stupid and don't let us move onto CSS2/3... they even make us make sure it's all flawless with IE6... Long argument... trust me I've already tried many times :)

Link to comment
Share on other sites

  • 0

I wasn't asking you to convert from it was just curious to know why you had to use 'em :).

So are you not able to include a stylesheet then?

Link to comment
Share on other sites

  • 0

I would like to help but i'm sure sure i understand your problem sadly. Maybe posting a picture or 2 to show visually the problem would help.

But i'll say good luck working with tables and not fixed width. This is a pain in the ass. God bless CSS, fixed width page and the zoom all feature of modern web browsers ;) My company decided last year to throw our old tables 100% width layout in the garbage and my life is so much easier now ...

Link to comment
Share on other sites

  • 0

https://advisors.aeroplan.com/R.aspx?a=361&t=1

The 3rd question shows how it breaks when it becomes to tall.

If anything looks useless or messed... I've fiddled with this thing all day so it may have gotten a little bit jumbled....

Basically anything above the <td id="contentbox"> tag, and below it's closing </td> tag I have access to edit, everything in the middle I do not (except with CSS).

Link to comment
Share on other sites

  • 0

https://advisors.aeroplan.com/R.aspx?a=361&t=1

The 3rd question shows how it breaks when it becomes to tall.

All 3 first questions break badly using IE7.

If anything looks useless or messed... I've fiddled with this thing all day so it may have gotten a little bit jumbled....

Basically anything above the <td id="contentbox"> tag, and below it's closing </td> tag I have access to edit, everything in the middle I do not (except with CSS).

Using last version of Firefox all 3 questions look the same. The left and right border on the 3rd question don't stretch or repeat though is it the problem you are talking about ?

Link to comment
Share on other sites

  • 0

Sorry was missing a > on one of the </tr> tags so that's why IE7 was broken....

The 3rd question doesn't look how it should... the think grey line should extend down, until the final 167pxs, where the bottom image should be placed, the one that goes from the Grey line, to white, to a dropshadow on the side (https://advisors.aeroplan.com/skin/patch/images/survey-body-bottom-left.png).

The left and right border on the 3rd question don't stretch or repeat though is it the problem you are talking about ?

That's exactly what I'm talking about :)

Link to comment
Share on other sites

  • 0

&lt;table cellpadding="0" cellspacing="0" height="100%"&gt;
				&lt;tr&gt;
					&lt;td id="survey-body-top-left" width="30" height="167" valign="top" class="167"&gt;&lt;img src="survey-body-top-left.png" width="30" height="167" alt="" /&gt;&lt;/td&gt;
				&lt;/tr&gt;

				&lt;tr&gt;
					&lt;td id="survey-body-left" width="30" height="100%"&gt;&lt;img src="spacer.gif" width="30" height="100%" alt="" style="height: 100%;" /&gt;&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td id="survey-body-bottom-left" width="30" height="283" valign="bottom" class="283"&gt;&lt;img src="survey-body-bottom-left.png" width="30" height="283" alt="" /&gt;&lt;/td&gt;
				&lt;/tr&gt;
			&lt;/table&gt;

The problem is the table doesn't take 100% of the height avalaible. The height of the table is the total height of the 3 images. The height at 100% on the TD should not be necessary. It will take automatically all the space avalaible since the other 2 TDs have fixed height. The height at 100% on the image just means the image will be displayed at full height. Why the table doesn't tale 100% of the space avalaible ? good question. I'll try to look into it if i find some time. But from my own experience height 100% is a very unreliable thing. It's often better to dynamically get the desired height using JS (using JQuery is a simple way to do it) and set a fixed height.

This is what things like lightbox do and this is what you need to do when working with dynamically sized iframe.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.