Getting Those Cut Images to Fit in a Table - Web Design Tutorial

Vikki Olds March 15, 2004   1 You've read about cutting your larger images for your web pages to help them load faster. You've learned about creating tables and think you have it all scoped out. You create your table and place your images in it only to find that there is space between the cuts that shouldn't be there. Not to worry. The solution is easy. Below is my cut image in a 2 x 3 table. As you can see the cut edges don't meet making the image broken.     2 The code for the table above is below: <table border="0" width="500"> <tr> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_1x1.gif" width="249" height="119"></font> </td> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_1x2.gif" width="251" height="119"></font> </td> </tr> <tr> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_2x1.gif" width="249" height="164"></font> </td> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_2x2.gif" width="251" height="164"></font> </td> </tr> <tr> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_3x1.gif" width="249" height="117"></font> </td> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_3x2.gif" width="251" height="117"></font> </td> </tr> </table>   3 The very simple answer to this circumstance is to specify cellpadding and cellspacing in your table code. In particular in the opening <table> tag.     4 The code for the corrected table is below. <table border="0" width="500" cellpadding=0 cellspacing=0> <tr> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_1x1.gif" width="249" height="119"></font> </td> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_1x2.gif" width="251" height="119"></font> </td> </tr> <tr> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_2x1.gif" width="249" height="164"></font> </td> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_2x2.gif" width="251" height="164"></font> </td> </tr> <tr> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_3x1.gif" width="249" height="117"></font> </td> <td> <font face="Verdana" size="2"> <img border="0" src="Image2_3x2.gif" width="251" height="117"></font> </td> </tr> </table>   5 As you can see by the red text indicated above the very simple solution is to add cellpadding=0 and cellspacing=0. This sets the table up so that it knows there should be absolutely no space between cells. That's all there is to it. What may have seemed like a large problem has a really simple fix. Try it. Have fun!   Copyright 2004, Vikki Olds, All Rights Reserved