Column width woes

P

Paul Lautman

Below are 2 table definitions, the first with 3 columns and the second with
2.

Can anyone point me to the reason why the first column is being rendered
with a different width in the 2 tables?

<TABLE WIDTH="740" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="440" VALIGN=TOP>
<P ALIGN=CENTER>
<IMG SRC="images/title1.gif" WIDTH="400" HEIGHT="100" VSPACE="0"
HSPACE="0" BORDER="0"></TD>
<td style="visibility:visible"><A HREF="mail.htm"><IMG
SRC="images/mail.gif" WIDTH="123" HEIGHT="62" VSPACE="0" HSPACE="0"
BORDER="0"></A></td>
<td width="300">&nbsp;</td>
</TR>

</table>
<TABLE WIDTH="440" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="440" VALIGN=TOP>
<P ALIGN=CENTER>
<IMG SRC="images/title1.gif" WIDTH="400" HEIGHT="100" VSPACE="0"
HSPACE="0" BORDER="0"></TD>
<td style="visibility:visible"><A HREF="mail.htm"><IMG
SRC="images/mail.gif" WIDTH="123" HEIGHT="62" VSPACE="0" HSPACE="0"
BORDER="0"></A></td>
</TR>
</table>
 
M

Martin Jay

Paul Lautman said:
Below are 2 table definitions, the first with 3 columns and the second with
2.

Can anyone point me to the reason why the first column is being rendered
with a different width in the 2 tables?
<TABLE WIDTH="440" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="440" VALIGN=TOP>
<P ALIGN=CENTER>
<IMG SRC="images/title1.gif" WIDTH="400" HEIGHT="100" VSPACE="0"
HSPACE="0" BORDER="0"></TD>
<td style="visibility:visible"><A HREF="mail.htm"><IMG
SRC="images/mail.gif" WIDTH="123" HEIGHT="62" VSPACE="0" HSPACE="0"
BORDER="0"></A></td>
</TR>
</table>

Browsers will shuffle the contents of tables around to try and get them
to fit.

In the example you posted you've given the second table a width of
440px, and the first column of that table same width. That doesn't
leave any room of the second column, so browsers will shrink the first
column to try and make room for the second.
 
P

Paul Lautman

Martin said:
Browsers will shuffle the contents of tables around to try and get
them to fit.

In the example you posted you've given the second table a width of
440px, and the first column of that table same width. That doesn't
leave any room of the second column, so browsers will shrink the first
column to try and make room for the second.

OK I can see that I cocked up when trying to simplify the table before
posting. The same problem happens with the pair below, even though I have
got the widths correct this time. How do I specify that I want the widths as
I ask for them?

<TABLE WIDTH="740" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="440" VALIGN=TOP ALIGN=CENTER>
<IMG SRC="images/title1.gif" WIDTH="400" HEIGHT="100" VSPACE="0"
HSPACE="0" BORDER="0">
</TD>
<td width="100" style="visibility:visible"><A HREF="mail.htm"><IMG
SRC="images/mail.gif" WIDTH="123" HEIGHT="62" VSPACE="0" HSPACE="0"
BORDER="0"></A>
</td>
<td width=200">&nbsp;</td>
</TR>
</table>

<TABLE WIDTH="540" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="440" VALIGN=TOP ALIGN=CENTER>
<IMG SRC="images/title1.gif" WIDTH="400" HEIGHT="100" VSPACE="0"
HSPACE="0" BORDER="0">
</TD>
<td width="100" style="visibility:visible">
<A HREF="mail.htm"><IMG SRC="images/mail.gif" WIDTH="123" HEIGHT="62"
VSPACE="0" HSPACE="0" BORDER="0"></A>
</td>
</TR>
</table>
 
M

Martin Jay

OK I can see that I cocked up when trying to simplify the table before
posting. The same problem happens with the pair below, even though I have
got the widths correct this time. How do I specify that I want the widths as
I ask for them?

<TABLE WIDTH="740" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="440" VALIGN=TOP ALIGN=CENTER>
<IMG SRC="images/title1.gif" WIDTH="400" HEIGHT="100" VSPACE="0"
HSPACE="0" BORDER="0">
</TD>
<td width="100" style="visibility:visible"><A HREF="mail.htm"><IMG
SRC="images/mail.gif" WIDTH="123" HEIGHT="62" VSPACE="0" HSPACE="0"
BORDER="0"></A>
</td>
<td width=200">&nbsp;</td>
</TR>
</table>

<TABLE WIDTH="540" CELLPADDING="2" CELLSPACING="0" BORDER="1">
<TR>
<TD WIDTH="440" VALIGN=TOP ALIGN=CENTER>
<IMG SRC="images/title1.gif" WIDTH="400" HEIGHT="100" VSPACE="0"
HSPACE="0" BORDER="0">
</TD>
<td width="100" style="visibility:visible">
<A HREF="mail.htm"><IMG SRC="images/mail.gif" WIDTH="123" HEIGHT="62"
VSPACE="0" HSPACE="0" BORDER="0"></A>
</td>
</TR>
</table>

Well, you're still trying to put an image with a width of 123px inside a
cell that has a given a width of 100px, but I guess that was just a
small slip you made when preparing this for posting here.

Something you haven't taken into consideration is that cell padding and
borders all take up space, so while in the first table
440px+100px+200px=740px, where's the space for the padding and border
going to come from?

I've stripped away all that and had a play with your tables, but get
varying results in IE and Firefox. I think, at best, <td width="100">
is only a suggested width to the browser.

To make everything line up you'll probably have to use one table or DIVs
instead.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top