Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

messy tables

Status
Not open for further replies.

Guest_imported

New member
Jan 1, 1970
0
0
0
I don't understand why my leftmost <td> cell and my rightmost <td> cell, both 10% width, are not visually looking the same. one is smaller than the other. It is messy looking.

what is wrong with my code?

<table border=&quot;0&quot; align=&quot;left&quot; valign=&quot;top&quot; width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr >
<td colspan=&quot;3&quot; align=&quot;center&quot; valign=&quot;top&quot;>
<img src=&quot;gallery photos/Venetian-Room-web.jpg&quot; width=&quot;518&quot; height=&quot;389&quot; align=&quot;left&quot; border=&quot;2&quot;>
<br clear=&quot;all&quot;><br clear=&quot;all&quot;>
</td>
</tr>

<tr bgcolor=&quot;#666666&quot;>
<td width=&quot;10%&quot; align=&quot;right&quot; valign=&quot;middle&quot;>

</td>
<td width=&quot;80%&quot; align=&quot;center&quot; valign=&quot;middle&quot;>

<b><font color=&quot;#ffffff&quot;>Venetian Room - 1</font></b>
</td>
<td width=&quot;10%&quot; align=&quot;left&quot; valign=&quot;middle&quot; <a href=&quot;5.html&quot; target=&quot;_top&quot;><img src=&quot;../graphics/doubleright.gif&quot;

border=&quot;0&quot; alt=&quot;Next Five&quot;></a>
<a href=&quot;2.html&quot; target=&quot;_top&quot;><img src=&quot;../graphics/next.gif&quot; alt=&quot;next&quot; border=&quot;0&quot;> </a>
</td>
</tr>

</table>
 
It seemed to work fine for me when I used your table code.

When you use it, which is larger, the left or the right?

Are the images in the right hand cell wider than 10% of the screen width? If they are, then this will force the right hand cell to be larger than it should be - the browser will try to make it 10% or the width of the images, whichever is the larger.

One option, to keep things the same size, is to put a transparent image in the left hand cell that is the same width as the two images in the right hand cell. Regards,

Jon Wilson
Threespot Limited
 
Like Notbob said, i'd double check the dimensions of the images and specify these. I would also use specific values for the table cells instead of percentage values.
Also (guess) i presume images have a default padding/margin so this might push the cell a little bit bigger whereas the left cell has no content so may not get pushes bigger.
Transparent gif can be a good idea!

É **new site coming soon**
**don't visit just yet**
 
hi...thanks for all of your replies.

The left side cell is clearly larger than the right side cell. But I can see this only when the table borders are visible.

The images are definitely not as large as the cell. there is a lot of extra space there. plus the two graphics in the right cell are the same exact size as the two graphics in the left cell.

I tried changing everything to pixel dimensions and the same thing happened. the left cell was bigger than the right cell.

Notbob, did it really come out even and perfect for you? how did you do it? please let me know your ideas. thanks.

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top