Table problem [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Table problem

opilander

11-28-2002, 04:20 AM

Hi! I have a table with two columns and two rows. The second column is a rowspan="2" so I have three cells. Now, is there any way to control the height of the upper left cell, so that only the bottom left cell would grow when the content of the right column increases?

Petter Ilander

smurfy

11-28-2002, 06:04 AM

<table cellpadding="2" cellspacing="2" border="1" width="100%">
<tbody>
<tr>
<td valign="top" height="50">Cell to remain at 50PX Height.<br>
</td>
<td valign="top" rowspan="2" colspan="1"><img
src="../michelangelo.jpg" alt="Michaelangelo Picture"
width="490" height="622" title="Michaleangelo.jpg">
<br>
</td>
</tr>
<tr>
<td valign="top">Stretchy Cell<br>
</td>
</tr>

</tbody>
</table>

------------------------------
Of course, we all know that you should probably be using CSS to control the layout rather than a table, but gee, aren't tables just so much EASIER :D

Stefan

11-28-2002, 08:18 AM

Originally posted by smurfy
Of course, we all know that you should probably be using CSS to control the layout rather than a table, but gee, aren't tables just so much EASIER :D

:p

:D

Just FYI this is how to do it with CSS

<div style="float:left; height:50px; width:100px;">Top Left</div>
<div style="float:left; width:100px;">Bottom Left</div>

Your "strechy" cell.

<div style="clear:both;">Just to make sure stuff is where it's supposed to be in case the right side is shorter then the left side.</div>

opilander

11-29-2002, 03:59 AM

OK! Thanks for your tips. I'm trying out the CSS solution but right away I've encountered a problem. The fixed cell in my table I've turned into a normal <p> element that I've given a background image. Now this background image should line up with the image that is above it. Now although I've asked for no margins and no padding my browser leaves a 9 pixel wide gap. The top image has a height of 126px and if I position the paragraph 117px from the top they line up. What's going on?

Stefan

11-29-2002, 04:06 AM

Originally posted by opilander
What's going on?

You have an URL to the page?
Would make it a lot easier to help.

opilander

11-30-2002, 05:59 AM

Yeah. This is the page I'm tryin' stuff out on:

http://www.uwasa.fi/~h79188/test.html

Could the gap just be the <p> forcing an empty line before allowing the "paragraph" to begin?

Stefan

11-30-2002, 07:57 AM

Yes, the <p> will mess it up since it adds a margin by default.
Further you might not be aware that in you in fact got 2 <p> adding margin.

The reason is that <img> may NEVER lie directly under <body>. Most browsers recover from that codingerror by adding a virtual <p> around it.

Anyway, here is a valid solution that should be working better.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style title="Default" media="screen" type="text/css">

</style>
</head>
<body>

<div><img src="kuvat/topyhteys.gif" alt=""></div>

<div class="balk">
Artikkelit<br>
Uutisia<br>
Palvelut<br>
Linkit<br>
Henkilökuva<br>

Lyhyesti<br>
Viikon<br>kysymys</div>

</body>
</html>