views:

240

answers:

1

Hi I created a table with 4 rows and 16 columns in HTML and I inserted an image in one cell and text in another until I had all my rows and columns. See my code below. My problem lies with the image: the image size is too big. I don't know how to get it to about the size of a thumbnail. Also the text isn't sitting right next to the image. Note: the image is on the left and the text is on the right side of the image. Any help would be greatly appreciated. Thanks.

<html>
<head>
<title> Cameron Cookies </title>
</head>


<body>
<table cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="j0175514.jpg" alt="Chocolate cookies"></img></td>
        <td>Chocolate</td>
        <td><img src="j0408843.jpg" alt="Chocolate Nut cookies"></img></td>
        <td>Chocolate Nut</td>
    </tr>
    <tr>
        <td><img src="j0428480.jpg" alt="Macadamia Nut cookies"></img></td>
        <td>Macadamia Nut</td>
        <td><img src="j0182695.jpg" alt="Oatmeal Raisin cookies"</img></td>
        <td>Oatmeal Raisin</td>
    </tr>
    <tr>
        <td><img src="j0428480.jpg" alt="M & M cookies"</img></td>
        <td>M & M's</td>
        <td><img src="j0440992.jpg" alt="White Chocolate cookies"</td>
        <td>White Chocolate</td>
    </tr>
    <tr>
        <td><img src="j0387871.jpg" alt="Chocolate Pecan cookies"</img></td>
        <td>Chocolate Pecan</td>
        <td><img src="j0425515.jpg" alt="Chocolate Hazelnut cookies"</img></td>
        <td>Chocolate Hazelnut</td>
    </tr>
</table>
</br>Cookies are a great gift idea that everybody loves. Just give us a call or send us an e-mail 24 hours in advance and we'll create
a lovely gift bag or basket filled with an assortment of fresh, homemade cookies.
Thanks for visiting our website and be sure to come visit us in person here in Portland, Maine.
To place an order, click here. </p>
</body>

</html>
+3  A: 

Most browsers will automatically resize an image to the dimensions specified in the width and height attributes of the <img> tag:

When specified, the width and height attributes tell user agents to override the natural image or object size in favor of these values.

When the object is an image, it is scaled. User agents should do their best to scale an object or image to match the width and height specified by the author. Visual presentation of images, objects, and applets

However, the right way to do this is to resize the original images to the desired dimensions.

So, if you need a 160 x 120 image and instead you have a 1600 x 1200 image, go ahead and create the resized image and reference that in the source.

Doing so will help the page load faster because the image file will now be much smaller than the original.

Sinan Ünür
@Sinan Unur -Thanks for your help. I ended up resizing it in Photoshop CS3 and referencing the newly downsized image in my HTML <img> tags and that worked perfectly. So thanks!
Ashley