I did a table like this<br />
<br />
<table align="left" valign="top" border="0" cellpadding="0" cellspacing="0"><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/"images/angle_dots.gif" width="39" height="108" border="0" alt="" /></td><br />
</tr><br />
</table><br />
<br />
and the width/height were only as large as the image. But then I did this<br />
<br />
<table align="left" valign="top" border="1" cellpadding="0" cellspacing="0"><br />
<tr><br />
<td width="1" height="68"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="68" border="0" alt="" /></td><br />
<td rowspan="3" align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/angle_dots.gif" width="39" height="108" border="0" alt="" /></td><br />
</tr><br />
<tr><br />
<td width="1" height="8"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="8" border="0" alt="" /></td><br />
</tr><br />
<tr><br />
<td width="1" height="32"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="32" border="0" alt="" /></td><br />
</tr><br />
</table><br />
<br />
and there is now extra space above/below the image. in the first column (3 rows) the heights add up to 108, just like the image height. Why does adding that first column push the height of the table larger? How can I fix it so that the image is snug against the edges of the table?<br />
<br />
Thanks,<br />
Shun-Luoi<!--content-->without having tried your code, I suggest you add these attributes to your image tags and see if they help:<br />
<br />
hspace=0 vspace=0<br />
<br />
images have a smaller amount of space around them by default, by adding the above attributes to the img tag you can control the amount of space.<!--content-->I tried adding the hspace and vspace attributes but that didn't change anything. Let me update my question and provide the code that I'm struggling with right now.<br />
<br />
<table align="left" valign="top" height="108" border="0" cellpadding="0" cellspacing="0"><br />
<tr><br />
<br />
<td colspan="2" align="left" valign="middle" height="68"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="68" hspace="0" vspace="0" border="0" align="left" /><br />
<span id="logo" nowrap="true">Text here!</span><br />
</td><br />
<td rowspan="3" align="left" valign="top" width="39" height="108"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/angle_dots.gif" width="39" height="108" hspace="0" vspace="0" border="0" alt="" /><br />
</td><br />
</tr><br />
<tr><br />
<td align="left" width="1" height="8" background="images/white_dot.gif" style="background-repeat: repeat-x"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="8" hspace="0" vspace="0" border="0" alt="" /><br />
</td><br />
<td height="8" background="images/white_dot.gif" style="background-repeat: repeat-x"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="8" hspace="0" vspace="0" border="0" alt="" /><br />
</td><br />
</tr><br />
<tr bgcolor="#ffffdd"><br />
<td align="left" width="1" height="32"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="32" hspace="0" vspace="0" border="0" alt="" /></td><br />
<td align="left" valign="middle"><br />
<span id="header"><br />
<a href=http://www.htmlforums.com/archive/index.php/"" class="header_links">Home</a> | <br />
<a href=http://www.htmlforums.com/archive/index.php/"about/about_biography.php" class="header_links">About</a> | <br />
<a href=http://www.htmlforums.com/archive/index.php/"portfolio/index.php" class="header_links">Portfolio</a> | <br />
<a href=http://www.htmlforums.com/archive/index.php/"contact/index.php" class="header_links">Contact</a> <br />
<br />
<br />
</span><br />
</td><br />
</tr><br />
</table><br />
<br />
The problem with the code is in the row with the white_dot.gif background. It is supposed to only have height=8 but the height is being pushed to about double that. That in turn is messing up the rest of the table.<br />
<br />
you can see it here. <!-- m --><a class="postlink" href="http://www.inspirixis.com/test_folder/test_table.php">http://www.inspirixis.com/test_folder/test_table.php</a><!-- m --><br />
<br />
thanks,<br />
luoi<!--content-->well, you need to have <td></td> in line with themeselves or the closing tag follow the open tag. so you should have it like this<br />
<br />
<br />
<td><img><br />
</td><br />
<br />
but you should have it like this<br />
<br />
<td><img></td><!--content-->Wow, I'm surprised that was the solution. Thanks scoutt! <br />
<br />
I thought extra white space in html files was ignored!<br />
<br />
Thanks,<br />
Shun-Luoi<!--content-->it usually is, but has the table is concerned it is not.<!--content-->
<br />
<table align="left" valign="top" border="0" cellpadding="0" cellspacing="0"><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/"images/angle_dots.gif" width="39" height="108" border="0" alt="" /></td><br />
</tr><br />
</table><br />
<br />
and the width/height were only as large as the image. But then I did this<br />
<br />
<table align="left" valign="top" border="1" cellpadding="0" cellspacing="0"><br />
<tr><br />
<td width="1" height="68"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="68" border="0" alt="" /></td><br />
<td rowspan="3" align="left"><img src=http://www.htmlforums.com/archive/index.php/"images/angle_dots.gif" width="39" height="108" border="0" alt="" /></td><br />
</tr><br />
<tr><br />
<td width="1" height="8"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="8" border="0" alt="" /></td><br />
</tr><br />
<tr><br />
<td width="1" height="32"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="32" border="0" alt="" /></td><br />
</tr><br />
</table><br />
<br />
and there is now extra space above/below the image. in the first column (3 rows) the heights add up to 108, just like the image height. Why does adding that first column push the height of the table larger? How can I fix it so that the image is snug against the edges of the table?<br />
<br />
Thanks,<br />
Shun-Luoi<!--content-->without having tried your code, I suggest you add these attributes to your image tags and see if they help:<br />
<br />
hspace=0 vspace=0<br />
<br />
images have a smaller amount of space around them by default, by adding the above attributes to the img tag you can control the amount of space.<!--content-->I tried adding the hspace and vspace attributes but that didn't change anything. Let me update my question and provide the code that I'm struggling with right now.<br />
<br />
<table align="left" valign="top" height="108" border="0" cellpadding="0" cellspacing="0"><br />
<tr><br />
<br />
<td colspan="2" align="left" valign="middle" height="68"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="68" hspace="0" vspace="0" border="0" align="left" /><br />
<span id="logo" nowrap="true">Text here!</span><br />
</td><br />
<td rowspan="3" align="left" valign="top" width="39" height="108"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/angle_dots.gif" width="39" height="108" hspace="0" vspace="0" border="0" alt="" /><br />
</td><br />
</tr><br />
<tr><br />
<td align="left" width="1" height="8" background="images/white_dot.gif" style="background-repeat: repeat-x"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="8" hspace="0" vspace="0" border="0" alt="" /><br />
</td><br />
<td height="8" background="images/white_dot.gif" style="background-repeat: repeat-x"><br />
<img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="8" hspace="0" vspace="0" border="0" alt="" /><br />
</td><br />
</tr><br />
<tr bgcolor="#ffffdd"><br />
<td align="left" width="1" height="32"><img src=http://www.htmlforums.com/archive/index.php/"images/spacer.gif" width="1" height="32" hspace="0" vspace="0" border="0" alt="" /></td><br />
<td align="left" valign="middle"><br />
<span id="header"><br />
<a href=http://www.htmlforums.com/archive/index.php/"" class="header_links">Home</a> | <br />
<a href=http://www.htmlforums.com/archive/index.php/"about/about_biography.php" class="header_links">About</a> | <br />
<a href=http://www.htmlforums.com/archive/index.php/"portfolio/index.php" class="header_links">Portfolio</a> | <br />
<a href=http://www.htmlforums.com/archive/index.php/"contact/index.php" class="header_links">Contact</a> <br />
<br />
<br />
</span><br />
</td><br />
</tr><br />
</table><br />
<br />
The problem with the code is in the row with the white_dot.gif background. It is supposed to only have height=8 but the height is being pushed to about double that. That in turn is messing up the rest of the table.<br />
<br />
you can see it here. <!-- m --><a class="postlink" href="http://www.inspirixis.com/test_folder/test_table.php">http://www.inspirixis.com/test_folder/test_table.php</a><!-- m --><br />
<br />
thanks,<br />
luoi<!--content-->well, you need to have <td></td> in line with themeselves or the closing tag follow the open tag. so you should have it like this<br />
<br />
<br />
<td><img><br />
</td><br />
<br />
but you should have it like this<br />
<br />
<td><img></td><!--content-->Wow, I'm surprised that was the solution. Thanks scoutt! <br />
<br />
I thought extra white space in html files was ignored!<br />
<br />
Thanks,<br />
Shun-Luoi<!--content-->it usually is, but has the table is concerned it is not.<!--content-->