TABLE COLPSAN / ROWSPAN problem [Archive]

Click to See Complete Forum and Search --> : TABLE COLPSAN / ROWSPAN problem

scrattis

10-15-2007, 04:49 AM

Hi,

I have a Table layout :( with following syntax:

<table>
<tr>
<td rowspan="2" class="left"></td>
<td colspan="2" class="bonus"></td>
</tr>
<tr>
<td class="nro1"></td>
<td class="nro2"></td>
</tr>
</table>

Now, when cell left is higher than cells 1 and 2, it leaves empty space after the bonus cell.
Like this:
http://mediakartano.mediakolmio.fi/TEMP/table_problem.gif

Is there a way to solve this simple?

felgall

10-15-2007, 05:24 AM

That doesn't look like tabular data so why are you using a table rather than the correct HTML tags where you wouldn't have this problem?

scrattis

10-15-2007, 07:06 AM

That doesn't look like tabular data so why are you using a table rather than the correct HTML tags where you wouldn't have this problem?

Because I just have to fix this problem, not recode the whole layout. I don't know even if that's possible because the cms.

harumph

10-15-2007, 10:11 AM

If you must use tables, go ahead and create a single cell instead of the 3 cells and valign it to top and embed another table inside it with a 2 col row and two cell row underneath. Then you're going to need to use some style borders to create your internal borders within the embedded table.

Problem solved. It's a pain, but it'll work. BTW, the table cell format you showed us is actually backwards from the gif you featured.

scrattis

10-15-2007, 10:17 AM

If you must use tables, go ahead and create a single cell instead of the 3 cells and valign it to top and embed another table inside it with a 2 col row and two cell row underneath.

Problem solved. It's a pain, but it'll work.

If I do that, the backgrounds of the bottom right and left cells are not stretched and background grey is visible instead :)

Of course I could add a background-image to the big left cell and add repeat-y to simulate the backgrounds of the two cells, but that is too ugly.

harumph

10-15-2007, 10:19 AM

Are you forcing a height on your table?

scrattis

10-15-2007, 10:21 AM

Are you forcing a height on your table?

No.. It's automatically based on the current content

harumph

10-15-2007, 10:23 AM

Well, actually this is the correct code for that purpose:

<table border="1">
<tr>
<td colspan="2"> </td>
<td rowspan="2">   </td>
</tr>
<tr>
<td>  </td>
<td>  </td>
</tr>
</table>

colspan first.

scrattis

10-15-2007, 10:25 AM

You're right :)

My example was on earlier site and they switched the columns afterwards. But the problem still remainis.

Here is simplified example:
http://mediakartano.mediakolmio.fi/TEMP/testi.htm

harumph

10-15-2007, 10:39 AM

Take a look at this:

<table bgcolor="#CCCCCC" cellspacing="0" cellpadding="0" style="border: 3px solid black">
<tr>
<td valign="top" bgcolor="#FF6633"><table width="100%" style="border-bottom: 3px solid black" cellspacing="0">
<tr>
<td bgcolor="#00FF33">  <br>  </td>
</tr></table>
<table width="100%" cellspacing="0">
<tr>
<td bgcolor="#FF9966" style="border-right: 3px solid black">    <br>  <br>  <br>  <br></td>
<td bgcolor="#9933CC">    <br>  <br>  <br>  <br></td>
</tr>
</table>
</td>
<td bgcolor="#990033" style="border-left: 3px solid black">    <br>  <br>  <br>  <br></td>
</tr>
</table>

scrattis

10-15-2007, 11:42 AM

Take a look at this:

<table bgcolor="#CCCCCC" cellspacing="0" cellpadding="0" style="border: 3px solid black">
<tr>
<td valign="top" bgcolor="#FF6633">
<table width="100%" style="border-bottom: 3px solid black" cellspacing="0">
<tr>
<td bgcolor="#00FF33">a  <br>  </td>
</tr>
</table>
<table width="100%" cellspacing="0">
<tr>
<td bgcolor="#FF9966" style="border-right: 3px solid black">
b    <br>  <br>  <br>  <br>
</td>
<td bgcolor="#9933CC">
c    <br>  <br>  <br>  <br>
</td>
</tr>
</table>
</td>
<td bgcolor="#990033" style="border-left: 3px solid black">
d    <br>  <br>  <br>  <br><br><br><br>
<br><br><br><br><br>
</td>
</tr>
</table>

I added couple more br -tags at the end of the last cell. Try what happens :) backgrounds of the bottom left and right cells doesn't stretch!

harumph

10-15-2007, 11:49 AM

I see what you mean. Lemee work on it a minute.

harumph

10-15-2007, 12:40 PM

Ok. You're gonna get a kick out of this. I think this works. That's so funny.

<table style="border: 3px solid black" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="border-bottom: 3px solid black" valign="top">a </td>
<td rowspan="3" style="border-left: 3px solid black" valign="top">d    <br>  <br>  <br>  <br><br><br><br>
<br><br><br><br><br>
</td>
</tr>
<tr>
<td rowspan="2" style="border-right: 3px solid black" valign="top">b    <br></td>
<td rowspan="2" valign="top">c   <br><br><br><br><br><br><br><br></td>
</tr>
</table>

scrattis

10-15-2007, 02:17 PM

If you put more br's to the d-column (the long one) it breaks like the original problem :/

harumph

10-15-2007, 02:59 PM

Oh, I forgot our original problem. Just a minute.

harumph

10-15-2007, 04:58 PM

Man, this thing is hard. Definitely a case for switching to CSS. For fun, take a look at this hack:

<table width="450" cellpadding="0" cellspacing="0">
<tr><td valign="top" width="150" bgcolor="#E9E9E9"><DIV style="position:absolute; width:298px; z-index:200; background-color: #EEEEEE; layer-background-color: #EEEEEE; visibility: visible;border-collapse: collapsed;"><table border="0" width="298" cellpadding="0" cellspacing="0">
<tr><td valign="top" width="298" colspan="2" style="border-bottom: 3px solid black" bgcolor="#CC99FF"><table border="0" width="100%" cellpadding="4" cellspacing="0"><tr><td bgcolor="#CC99FF">A </td></tr></table>
</td></tr><tr><td width="150" bgcolor="#E9E9E9" style="border-right: 3px solid black" valign="top"><table border="0" width="100%" cellpadding="4" cellspacing="0"><tr><td>B <br><br></td></tr></table>
</td><td width="149" bgcolor="#FFFFFF" valign="top"><table border="0" width="100%" cellpadding="4" cellspacing="0">
<tr><td>C <br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br><br>blah<br></td>
</tr></table></td></tr></table></div></td>
<td valign="top" width="150" style="border-left: 3px solid black"> </td>
<td valign="top" width="150" bgcolor="#CCCC99" style="border-left: 3px solid black"><table cellpadding="4" cellspacing="0" width="100%">
<tr><td>D <br>blah<br>blah<br><br>blah<br><br><br>blah<br><br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br><br>blah<br><br><br>blah<br><br>blah<br>blah<br><br>blah<br><br>blah<br><br>blah<br><br></td></tr></table>
</td></tr></table>

harumph

10-16-2007, 11:51 AM

This has been an education. I've never had to force this issue before.
The only way I have gotten this thing to work is to hard code heights to cover you here:

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top" nowrap colspan="2" height="50" style="border-bottom: 3px solid black"><table width="100%" border="1" bgcolor="#FFCCCC" cellpadding="5" cellspacing="0" height="50">
<tr>
<td>A      <br><br></td>
</tr>
</table>
</td><td rowspan="2" valign="top" style="border-left: 3px solid black" width="200" height="500">D      <br><br><br><br><br><br>      <br><br></td>
</tr><tr><td valign="top" height="500"> width="125" valign="top">B   
</td><td width="180" style="border-left: 3px solid black" valign="top">C      <br><br></td>
</tr>
</table>
</td>
</tr>
</table>

If these two match, it'll work. Weird.

scrattis

10-17-2007, 02:50 AM

This has been an education. I've never had to force this issue before.
The only way I have gotten this thing to work is to hard code heights to cover you here:

If these two match, it'll work. Weird.

Hi, but I don't want to hard code my heights because those are dynamic columns. If I put there a 100 pixel height, and when the content in the long column expands, we have our original problem. And if I put height="500" and there is actually just 300 pixels of content in the whole site, there's 200 pixels empty space in there...

I managed to make a js fix where in the end of the html, it checks the longest column, and if it is longer than the bottom columns, it changes the bottom columns height to correspond to the long ones.

Yes, this has been an education :D Neved thought would come accross so simple html-problem that i cannot fix :/

BTW, thanks for your efforts! I really appreciate it!