And here’s the actual background image:

Netscape Navigator’s rendering of table background images differs from that of Micrsoft Internet Explorer. Click on the options below to see an example of each.

• Netscaperenders a table background by fitting the image in each cell, tiling, if necessary. The lower part of the image is cut off because it doesn’t fit in the individual cells.
• Internet Explorer renders a table background by fitting/tiling the image in the entire table. The full image is tiled to fit the entire table area.

You should definitely keep this in mind when creating table backgrounds. And remember: Always view your pages in Netscape and Internet Explorer!

Check out the Project Cool Tables tutorial for more information on making tables.

Row and Cell Background Images

To use an image as a table row, or table cell background, add the “background” attribute to the appropriate tr, th, or td tag, like this:

The background attribute’s value is the URL of the image you want to use for the table background.

Here’s a table that contains one row and two cells with background images. click on the table title to see the code that created it.

If you have Navigator you will see the row effect. If you have IE, you will not. In this case, Navigator 4X supports the background attribute for table rows, but IE 5X does not. Cells are handled identically in both browsers.

Names & Numbers

Check out the Project Cool Tables tutorial for more information on making tables.

Storing Image Files

The images themselves aren’t actually placed in the .html file that displays them. Instead the file will call the images by name. The names can include either a full, exact path, or a relative path.

File Hierarchy

There are no hard-and-fast rules for file structure; HTML is flexible enough to accommodate many different storage schemes. But we heartily recommend the following simple approach:

• If all of your site’s HTML files reside in one directory, and if you have just a handful of image files, store your HTML files and image files in the same directory:

  www
    home
      index.html
      logo.gif
      photo.jpg

  Referencing image files in the above directory setup is simple. For example, to reference logo.gif from index.html, you would enter: .

• For any other situation than the above, store all of your image files in a separate image directory:

  www
    home
      index.html
    page1>
      page1.html
      links1.html
    images
      logo.gif
      photo.jpg
      thing.png

  Referencing image files in the above directory setup is just a tad more subtle. To reference logo.gif from page1.html, you would enter: .

  The .. moves you up one level, from page1 to www. Then, the /images/ moves down from www to the images directory.

Image-File Naming Guidelines

There are no etched-in-stone rules for naming image files. But here are some useful guidelines:

• Use the 8.3 naming convention. That is, limit the first part of your filename to a maximum of 8 characters and append to this a 3-character extension. For example: myimage.gif, a.jpg, alleight.png, etc. These are all 8.3 no-nos: mycoolimage.gif, a.jpeg, all_eight.png.

  Why? Because some of your users might be on platforms that do not support long filenames (Windows 3.x, for example).

• Use all lowercase letters.

  Why? Because some servers (UNIX, for example) are filename case-sensitive and it’s all too easy to make an upper/lower-case mistake when entering a filename in your HTML docs.

• Do not use spaces or punctuation marks, except for underscores _ and dashes – .

  Why? Because some servers might have trouble decoding these special characters.