placing a large image in a table

Please note that the instructions on this page are old. While this method of chopping an image and placing it in a table still works, it is not necessarily considered to be desirable. Using tables for placement of things on a page is code heavy. It is much better to use CSS. - March, 2007

This is how a large image can be cut up to reduce uploading time (although there is a legitimate debate out there in the ether as to whether it really does). Many images can be reduced in bytesize without really compromising the quality. Please hit the top dog to see a demonstration.

Change the table to border="0" to remove the lines:

tp_l.jpg 39 x 283 pixels 1.97kb	4thJuly.jpg 295 x 290 pixels 12.9kb	tp_r.jpg 330 x 290 pixels 13.1kb
lw_lft.jpg 39 x 283 pixels 2.47kb	lw_m.jpg 295 x 290 pixels 19.8kb	low_r.jpg 330 x 290 pixels 19kb

totalling 69.24

Here is a page showing the unchopped image (664 x 573 pixels - 54.2kb)

coding for the table (copy and paste - change the names of each imagepart.jpg and fill in the appropriate widths and heights):

---------------------------------------------------------------------
<table border="0" cellpadding="0" cellspacing="0"><tr><td><img src="imagepart.jpg" alt="which part of image" width="xx" height="yy" border="0" /></td><td><img src="imagepart.jpg" alt="which part of image" width="xx" height="yy" border="0" /></td><td><img src="imagepart.jpg" alt="which part of image" width="xx" height="yy" border="0" /></td></tr><tr><td><img src="imagepart.jpg" alt="which part of image" width="xx" height="yy" border="0" /></td><td><img src="imagepart.jpg" alt="which part of image" width="xx" height="yy" border="0" /></td><td><img src="imagepart.jpg" alt="which part of image" width="xx" height="yy" border="0" /></td></tr></table>
---------------------------------------------------------------------

Please note that it is essential that there are no spaces or line breaks in the coding of your table. If you do put in spaces or linebreaks into the coding, some browsers will put spaces between the image portions, causing the image to still look chopped up. You have to make a choice. Would you rather that your coding were easy for you to read or that your viewers will see your page as you intended it. If you are unfamiliar with table construction, Sizzling Jalfrezi has an easy to follow table tutorial.

The following coding using line breaks and spaces in the coding will cause weird spaces in some browsers:

No No No!! Please don't do this!

---------------------------------------------------------------------
         <table border="0" cellpadding="0" cellspacing="0">
      <tr>
   <td>
<img src="imagepart.jpg" alt="left" width="xx" height="yy" border="0" />
   </td>
   <td>
<img src="imagepart.jpg" alt="right" width="xx" height="yy" border="0" />
   </td>
      </tr>
          </table>

---------------------------------------------------------------------

Tables vs. CSS

Using tables for placement of things on a page is code heavy. It is much better to use CSS (not to mention that tables should be used as tables...). W3Schools CSS Tutorial and Quirksmode (CSS and Javascript) are invaluable sources of information for learning about CSS.

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page

Crosswinds WebHosting