Lesson 8

Intro to Images in Tables

Images can be used 2 ways in tables.

1. They can used in a standard image tag in a cell.
2. They can be used as backgrounds.

We already know how to put images in cells using an image tag:
<td>
<img src="URL_of_image" height=? width=? border=0 alt="description of image" />
</td>

We can control the size of an image with height & width in the image tag to make an image appear to be any size we want, regardless of its real size. We also know that we can position images in table cells using align and valign:
<td align="?" valign="?">
<!-- image goes here -->
</td>


Images as backgrounds

Images can also be used as backgrounds in a table tag, a row or a cell.
<table background="URL_of_image" ...>
<tr background="URL_of_image" ...>
<td background="URL_of_image" ...>

We cannot control the size of an image when it is used as a background. It will always appear in its real size. But we can control the size of a cell or table that has a background image in it.

Key concepts

• If a table or cell is smaller than a background image, only part of the image will appear, starting with the upper left corner of the image.

• If a table or cell is larger than a background image, the image will tile (repeat).

Demonstration
Here is an image of a country lane in the fall. It is used as a cell background in the 3 tables below. I also added a frame with cellspacing in the table tag.

Table 1 - cell is sized to image size, 240x176

Table 2 - cell is smaller than image so only part of the image shows, 160x117

Table 3 - cell is larger than image so it tiles, 320x234



Can you think of ways to take advantage of the tiling effect?

Code

Homework Assignment

1. Prepare to work with images in tables.
   Images you will need
   • One or more small "texture" type images, such as brick, stone, marble, paper, sky, water, paper, etc...
   • A small wood image suitable for use as a picture frame
   • An small to medium size "item" type of image with transparency to be put on top of a background
   • An small to medium size "item" type of image without transparency to be put on top of a background
   • At least one good sized "scenery" type of image

2. Make a table
   Scenery Prep
   • Make a 1-cell table
   • Put a "scenery" type of image as a background in your table
   • Use width & height to match the size of your image
   • Post your scene