Why Position Images With Tables?

Image positioning using what we've learned in Beginning HTML is adequate in almost all cases where an image is to be presented with text. Sometimes, such as in a "catalog" page, you will want a stronger visual bond between the image and the related text.

Tables can position images and text more precisely than the ALIGN attribute of the <img> tag. Borders can be used to further enhance the connection between an image and its related text.

A Basic Catalog Page

Here's an example of a catalog page. This page presents arms and armor for knights. Note how the use of both tabular formatting and borders closely associates the image with the relevant text. This layout provides a sharper, more formal look than just wrapping text around an image.

You shouldn't have any trouble at all understanding the <table> code behind this layout. it's a simple two column table with four rows. The first cell of each row contains an image and the second, some text.

Some Variations

You could just as easily put the text on the right and images on the left. You could also stagger the images and text as in this example. In the staggered case, separate tables had to be used for each item to avoid the confusion of having oddly spanned cells in a single table.

Note that in every case, there is little question about what text is associated with which image. This is the main purpose behind using tables to layout a catalog type page.

Now it's time to review what you've learned about tabular layout and make a few practice pages before trying the Final Exam.

To Next Advanced HTML Lesson

Back To Advanced HTML Index