Forums
This topic is locked
Using Images for Table Borders
Posted 30 May 2005 19:00:02
1
has voted
30 May 2005 19:00:02 Michael Cooper posted:
I'm using a table 3x3 table with border images in the outer cells. The top image works well as a bg image and spans with the table as the window changes, but the left and right images won't display correctly. The following URL shows the table and the spaces created above and below the border images:www.clayboy.biz/home.htm
Replies
Replied 31 May 2005 11:03:38
31 May 2005 11:03:38 Wayne Hultum replied:
Try this, I've just merged the left and right cells and added the image as a background. To be on the safe side I'd make a backup of the original before you try it.
<pre id=code><font face=courier size=2 id=code><table border="1" cellpadding="0" cellspacing="0" id="mainTable">
<tr>
<td><div align="right"><img src="img/leftcurve.gif" width="30" height="30"></div></td>
<td background="img/top.gif" id="bordercontent"> </td>
<td colspan="2" background="img/top.gif" id="bordercontent"> </td>
<td><div align="left"><img src="img/rightcurve.gif" width="29" height="30"></div></td>
</tr>
<tr>
<td rowspan="5" width="30" background="img/left.gif"><img src="img/left.gif" width="30" height="15"></td>
<td bgcolor="#336699"><div align="left"><img src="img/topnavleft.gif" width="20" height="60"></div></td>
<td colspan="2" bgcolor="#336699"><div align="right"><img src="img/topnavright.gif" width="132" height="60"></div></td>
<td rowspan="5" background="img/right.gif"><img src="img/right.gif" width="30" height="15"></td>
</tr>
<tr>
<td background="img/leftnav.gif" id="buttonnavcontent"> </td>
<td background="img/leftnav.gif" id="buttonnavcontent"><div align="right">
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><a href="home.htm" target="_top" onClick="MM_nbGroup('down','group1','Home','',1)" onMouseOver="MM_nbGroup('over','Home','img/homebuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/homebutton.gif" alt="" name="Home" width="85" height="19" border="0" onload=""></a></td>
<td><a href="kilns.htm" target="_top" onClick="MM_nbGroup('down','group1','Kilns','',1)" onMouseOver="MM_nbGroup('over','Kilns','img/kilnsbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/kilnsbutton.gif" alt="" name="Kilns" width="80" height="19" border="0" onload=""></a></td>
<td><a href="burners.htm" target="_top" onClick="MM_nbGroup('down','group1','Burners','',1)" onMouseOver="MM_nbGroup('over','Burners','img/burnersbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/burnersbutton.gif" alt="" name="Burners" width="103" height="19" border="0" onload=""></a></td>
<td><a href="contact.htm" target="_top" onClick="MM_nbGroup('down','group1','Contact','',1)" onMouseOver="MM_nbGroup('over','Contact','img/contactbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/contactbutton.gif" alt="" name="Contact" width="105" height="19" border="0" onload=""></a></td>
</tr>
</table>
</div></td>
<td background="img/leftnav.gif"><div align="right"><img src="img/rightnav.gif" width="141" height="19"></div></td>
</tr>
<tr>
<td colspan="3" bgcolor="#003366" id="maincontent"><h2>Welcome to Cooperworks!</h2></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" bgcolor="#003366" id="maincontent"><p>Cooperworks is a manufacturer of high quality ceramics equipment. Since 1990 it has used heat efficient design and durability to create gas and wood fire kilns that produce the best possible ceramics. </p>
<p>Cooperworks also builds Power Burners which are included on every kiln. The forced-air system injects oxygen into the burner providing more power and higher efficiency. </p>
<p> </p></td>
<td bgcolor="#003366" id="maincontent"><img src="img/kiln.jpg" width="216" height="300"></td>
</tr>
<tr>
<td bgcolor="#003366"><div align="left"><img src="img/mainbotleft.gif" width="20" height="15"></div></td>
<td colspan="2" bgcolor="#003366" id="footercontent"><div align="right"><img src="img/mainbotright.gif" width="66" height="15"></div></td>
</tr>
<tr>
<td><div align="right"><img src="img/left.gif" width="30" height="30"></div></td>
<td colspan="3" bgcolor="#FFFFFF"><div align="right"> </div></td>
<td><div align="left"><img src="img/right.gif" width="30" height="30"></div></td>
</tr>
</table> </font id=code></pre id=code>
<pre id=code><font face=courier size=2 id=code><table border="1" cellpadding="0" cellspacing="0" id="mainTable">
<tr>
<td><div align="right"><img src="img/leftcurve.gif" width="30" height="30"></div></td>
<td background="img/top.gif" id="bordercontent"> </td>
<td colspan="2" background="img/top.gif" id="bordercontent"> </td>
<td><div align="left"><img src="img/rightcurve.gif" width="29" height="30"></div></td>
</tr>
<tr>
<td rowspan="5" width="30" background="img/left.gif"><img src="img/left.gif" width="30" height="15"></td>
<td bgcolor="#336699"><div align="left"><img src="img/topnavleft.gif" width="20" height="60"></div></td>
<td colspan="2" bgcolor="#336699"><div align="right"><img src="img/topnavright.gif" width="132" height="60"></div></td>
<td rowspan="5" background="img/right.gif"><img src="img/right.gif" width="30" height="15"></td>
</tr>
<tr>
<td background="img/leftnav.gif" id="buttonnavcontent"> </td>
<td background="img/leftnav.gif" id="buttonnavcontent"><div align="right">
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><a href="home.htm" target="_top" onClick="MM_nbGroup('down','group1','Home','',1)" onMouseOver="MM_nbGroup('over','Home','img/homebuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/homebutton.gif" alt="" name="Home" width="85" height="19" border="0" onload=""></a></td>
<td><a href="kilns.htm" target="_top" onClick="MM_nbGroup('down','group1','Kilns','',1)" onMouseOver="MM_nbGroup('over','Kilns','img/kilnsbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/kilnsbutton.gif" alt="" name="Kilns" width="80" height="19" border="0" onload=""></a></td>
<td><a href="burners.htm" target="_top" onClick="MM_nbGroup('down','group1','Burners','',1)" onMouseOver="MM_nbGroup('over','Burners','img/burnersbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/burnersbutton.gif" alt="" name="Burners" width="103" height="19" border="0" onload=""></a></td>
<td><a href="contact.htm" target="_top" onClick="MM_nbGroup('down','group1','Contact','',1)" onMouseOver="MM_nbGroup('over','Contact','img/contactbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"><img src="img/contactbutton.gif" alt="" name="Contact" width="105" height="19" border="0" onload=""></a></td>
</tr>
</table>
</div></td>
<td background="img/leftnav.gif"><div align="right"><img src="img/rightnav.gif" width="141" height="19"></div></td>
</tr>
<tr>
<td colspan="3" bgcolor="#003366" id="maincontent"><h2>Welcome to Cooperworks!</h2></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" bgcolor="#003366" id="maincontent"><p>Cooperworks is a manufacturer of high quality ceramics equipment. Since 1990 it has used heat efficient design and durability to create gas and wood fire kilns that produce the best possible ceramics. </p>
<p>Cooperworks also builds Power Burners which are included on every kiln. The forced-air system injects oxygen into the burner providing more power and higher efficiency. </p>
<p> </p></td>
<td bgcolor="#003366" id="maincontent"><img src="img/kiln.jpg" width="216" height="300"></td>
</tr>
<tr>
<td bgcolor="#003366"><div align="left"><img src="img/mainbotleft.gif" width="20" height="15"></div></td>
<td colspan="2" bgcolor="#003366" id="footercontent"><div align="right"><img src="img/mainbotright.gif" width="66" height="15"></div></td>
</tr>
<tr>
<td><div align="right"><img src="img/left.gif" width="30" height="30"></div></td>
<td colspan="3" bgcolor="#FFFFFF"><div align="right"> </div></td>
<td><div align="left"><img src="img/right.gif" width="30" height="30"></div></td>
</tr>
</table> </font id=code></pre id=code>