CWC index .

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.

topleft of 'two dogs'4th of July Dogtopright of 'two dogs'
bottomleft of 'two dogs'bottom middle of 'two dogs'bottomright of 'two dogs'

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

topleft of 'two dogs'4th of July Dogtopright of 'two dogs'
bottomleft of 'two dogs'bottom middle of 'two dogs'bottomright of 'two dogs'


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.

© llizard 2001, 2003, 2007

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