Weird Table Generation

**mr_fern** · August 25th, 2005, 4:52 AM

I gave up on this code and just put the time information in a div above the table but I was curious if anybody would know why the code below would generate so differently based on the length of the text in the first row

Code 1: Weird Results

Code:

<table width="100%" cellpadding="0" cellspacing="0" border="1">
	<tr>
		<td colspan="2" align="right">
		Posted: Jul 22, 2005 - 8:07pm</td>
	</tr>
	<tr>
		<td align="center" width="150">
		<img width="100" height="100" alt="user thumbnail" border="0"> <br>
		<img width="16" height="16" alt="user icon" align="absbottom" border="0">username</td>
		<td valign="top">
		word </td>
	</tr>
</table>

Code 2: Correct/Desired Results

Code:

<table width="100%" cellpadding="0" cellspacing="0" border="1">
	<tr>
		<td colspan="2" align="right">
		Jul 22, 2005 - 8:07pm</td>
	</tr>
	<tr>
		<td align="center" width="150">
		<img width="100" height="100" alt="user thumbnail" border="0"> <br>
		<img width="16" height="16" alt="user icon" align="absbottom" border="0">username</td>
		<td valign="top">
		word </td>
	</tr>
</table>

The codes are exactly the same, the only difference is the length of information in the top row's td, but they come out dramatically different... I attached a screenshot of the two tables generated as they look on my computer.

Z`ohki · August 26th, 2005, 4:19 PM

I think both top row's td use the 150px width, even if you don't have it at the second td. But it's a table so it automaticly takes the 150 on the next one as well.

You should try to change the 150px width to something of a percentage, like in the table width. Or change the table width. Looks to me that the first code's information is too long for it too fit in the 150px td, so it stretches out, the same with the second td.

At least I think so :P

**mr_fern** · August 27th, 2005, 8:07 AM

The odd thing though, is if there's enough content in the right column, the left column doesn't stretch.... and the thing that's peculiar to me about the stretch other than the mere fact that it occurs, the image and text are still centering according to the 150px width specified even when that left column is stretched out.

**Ancyru** · August 27th, 2005, 11:55 AM

Tables, the devil's advocate!

Sorry, I can't be much more help.

dna · August 28th, 2005, 8:20 PM

The only things I could think of were to make the 'word' column auto stretch and us a spacer as below or try making the 'word' column about 80-85% without using a spacer.

Code:

<table width="100%" cellpadding="0" cellspacing="0" border="1">
	<tr>
		<td colspan="2" align="right">
		Posted: Jul 22, 2005 - 8:07pm</td>
	</tr>
	<tr><td height="1"><img src="images/spacer.gif" alt="" width="150" height="1"></td><td></td></tr>
	<tr>
		<td align="center" width="150">
		<img width="100" height="100" alt="user thumbnail" border="0"> <br>
		<img width="16" height="16" alt="user icon" align="absbottom" border="0">username</td>
		<td width="100%" valign="top">
		word </td>
	</tr>
</table>

H · August 28th, 2005, 8:28 PM

The way I'd do it is this:

Specify width of table (either static or dynamic).
Specity all absolute widths (static).
Leave dynamics empty (unless you need them to be dynamic to a certain proportion).

Alternatively, you could use some nice CSS to set the widths, which is actually a lot better than the default HTML styling.

Edit: I want to clarify myself a bit
By leaving the width value blank, it gets the browser to automatically size it to "fill" in the empty space.

If you take the CSS route, you would use "width: ###px;" for static and then "width: auto;" for dynamic column widths.

**mr_fern** · August 28th, 2005, 8:44 PM

I am using the css route, i only put the specific widths in the examples above because I'm using classes instead of inline styles.

If there are more words in the right column, the left column doesn't stretch off to the right. If the top row doesn't have a certain length it doesn't stretch. In one case it was the difference between bolding the word posted and leaving it unbolded which determined if it would stretch or not. If the top row was removed completely, it wouldn't stretch.

I tried alternating with specific widths and percentages, and same results.

DNA's solution looks pretty well. I think it's time I start going the route of the div and css when designing as suggested on some sites.

August 25th, 2005, 4:52 AM	#1 (permalink)
mr_fern All Ur Base R Belong 2 Us Excelling Contributor Joined in Feb 2005 Lives in Vegas & New York 824 posts Gave thanks: 2 Thanked 6 times	Weird Table Generation I gave up on this code and just put the time information in a div above the table but I was curious if anybody would know why the code below would generate so differently based on the length of the text in the first row Code 1: Weird Results Code: <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td colspan="2" align="right"> Posted: Jul 22, 2005 - 8:07pm</td> </tr> <tr> <td align="center" width="150"> <img width="100" height="100" alt="user thumbnail" border="0"> <br> <img width="16" height="16" alt="user icon" align="absbottom" border="0">username</td> <td valign="top"> word </td> </tr> </table> Code 2: Correct/Desired Results Code: <table width="100%" cellpadding="0" cellspacing="0" border="1"> <tr> <td colspan="2" align="right"> Jul 22, 2005 - 8:07pm</td> </tr> <tr> <td align="center" width="150"> <img width="100" height="100" alt="user thumbnail" border="0"> <br> <img width="16" height="16" alt="user icon" align="absbottom" border="0">username</td> <td valign="top"> word </td> </tr> </table> The codes are exactly the same, the only difference is the length of information in the top row's td, but they come out dramatically different... I attached a screenshot of the two tables generated as they look on my computer. Attached Thumbnails __________________ Nobody doing nothing

August 27th, 2005, 8:07 AM	#3 (permalink)
mr_fern All Ur Base R Belong 2 Us Excelling Contributor Joined in Feb 2005 Lives in Vegas & New York 824 posts Gave thanks: 2 Thanked 6 times	The odd thing though, is if there's enough content in the right column, the left column doesn't stretch.... and the thing that's peculiar to me about the stretch other than the mere fact that it occurs, the image and text are still centering according to the 150px width specified even when that left column is stretched out. __________________ Nobody doing nothing

August 27th, 2005, 11:55 AM	#4 (permalink)
Ancyru L'Awesome Advocate Super #1 Joined in May 2004 Lives in .au Hosted on Mango 2,423 posts Gave thanks: 1 Thanked 5 times	Tables, the devil's advocate! Sorry, I can't be much more help. __________________ When I get sad, I stop being sad, and be AWESOME instead. True story.

August 28th, 2005, 8:28 PM	#6 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,084 posts Gave thanks: 48 Thanked 131 times	The way I'd do it is this: Specify width of table (either static or dynamic). Specity all absolute widths (static). Leave dynamics empty (unless you need them to be dynamic to a certain proportion). Alternatively, you could use some nice CSS to set the widths, which is actually a lot better than the default HTML styling. Edit: I want to clarify myself a bit By leaving the width value blank, it gets the browser to automatically size it to "fill" in the empty space. If you take the CSS route, you would use "width: ###px;" for static and then "width: auto;" for dynamic column widths. Last edited by H; August 28th, 2005 at 8:32 PM..

August 28th, 2005, 8:44 PM	#7 (permalink)
mr_fern All Ur Base R Belong 2 Us Excelling Contributor Joined in Feb 2005 Lives in Vegas & New York 824 posts Gave thanks: 2 Thanked 6 times	I am using the css route, i only put the specific widths in the examples above because I'm using classes instead of inline styles. If there are more words in the right column, the left column doesn't stretch off to the right. If the top row doesn't have a certain length it doesn't stretch. In one case it was the difference between bolding the word posted and leaving it unbolded which determined if it would stretch or not. If the top row was removed completely, it wouldn't stretch. I tried alternating with specific widths and percentages, and same results. DNA's solution looks pretty well. I think it's time I start going the route of the div and css when designing as suggested on some sites. __________________ Nobody doing nothing

August 26th, 2005, 4:19 PM	#2 (permalink)
Z`ohki Registered User Comfy Contributor Joined in Aug 2005 Lives in Netherlands Hosted on Pass48 124 posts Gave thanks: 0 Thanked 0 times	I think both top row's td use the 150px width, even if you don't have it at the second td. But it's a table so it automaticly takes the 150 on the next one as well. You should try to change the 150px width to something of a percentage, like in the table width. Or change the table width. Looks to me that the first code's information is too long for it too fit in the 150px td, so it stretches out, the same with the second td. At least I think so :P

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread: