Forum Moderators: mack
I want the first and third columns to be small columns and the second column, the middle column, to take up all the space in between. I do this by setting a specified table width, then specifing widths on columns 1 and 3, and then not specifing a width for the second (middle) column.
This seems to work, until I make the second row. It spans all 3 columns (colspan=3). When a few letters are written in this cell, the table stays fine, but when text (or an image) reaches the middle of the table, the cells in the first row get all out of whack. Why does it do this?
Thanks for reading, and hopefully helping... - Jesse
Oh, here's some code: (table looks fine unless the colspan=3 column has lots of text in it)
<html>
<body>
<table width=200 border=1 cellpadding=0 cellspacing=0 bordercolor=black>
<tr height=50>
<td width=50> </td>
<td> </td>
<td width=50> </td>
</tr>
<tr height=50>
<td colspan=3 align=center> </td>
</tr>
</table>
</body>
</html>
ben
-Matt
<table width=100% border=1 cellpadding=0 cellspacing=0 bordercolor=black>
<tr height=50>
<td width=50> </td>
<td> </td>
<td width=50> </td>
</tr>
<tr height=50>
<td width=50> </td>
<td align=center> </td>
<td width=50> </td>
</tr>
</table>
-Matt
<tr height=50>
<td width=50> </td>
<td> </td>
<td width=50> </td>
</tr>
<tr height=50>
<td colspan=3><img src="images/spda_title.gif" height=50 width=114></td>
</tr>
</table>
but changing the img width to 115 or anything higher makes row 1 go nuts! (nuts=bad) What's the deal?
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50"><img src="clear.gif" width="50" height="1"></td>
<td width="100%"></td>
<td width="50"><img src="clear.gif" width="50" height="1"></td>
</tr>
<tr>
<td width="100" colspan="3"></td>
</tr>
</table>
If you plan on having content in those columns you can either add another 3 column row that is 1 pixel in height and have the clear.gif image in the left and right columns
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50" height="1"><img src="clear.gif" width="50" height="1"></td>
<td width="100%" height="1"></td>
<td width="50" height="1"><img src="clear.gif" width="50" height="1"></td>
</tr>
<tr>
<td width="50" valign="top"></td>
<td width="100%" valign="top"></td>
<td width="50" valign="top"></td>
</tr>
<tr>
<td width="100" colspan="3"></td>
</tr>
</table>
OR
You can nest a table of two rows in both the left and right columns and insert clear.gif into one of the rows of the nested table.
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><img src="clear.gif" width="50" height="1"></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
</table>
</td>
<td width="100%" valign="top"></td>
<td width="50" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><img src="clear.gif" width="50" height="1"></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100" colspan="3"></td>
</tr>
</table>
The problem seems to be a rendering bug in IE.
I tried your code, which looks absolutely correct, in Mozilla Firebird and Opera. It worked perfectly in both. No matter what pixel-width I gave the image in the second row, the first and third columns in the first row retained a pixel-width of 50: only in IE did the column pixel-width (inexplicably) change.
If you give the image a pixel width of 100% though, the code works as it should in all three browsers.
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="black">
<tr height="50">
<td width="50"> </td>
<td> </td>
<td width="50"> </td>
</tr>
<tr height="50">
<td colspan="3">
<img src="/myimage.gif" height="50" width="100%" border="0" alt="myimage">
</td>
</tr>
</table>
