[ Prev ] [ Index ]

Image Tables

Table-data tags can accept both text and images. Where the text is unbroken (ie. composed of flowing sentences), the text will wrap itself around the inline image if the IMAGE-tag precedes the text and includes an "ALIGN=left" attribute. This first paragraph illustrates just such a method of combining images and text in a table-data cell.

Internal rows of text can be set alongside an image by further table-within-table settings, or by a combination of ALIGN and HSPACE/VSPACE attributes added to the IMAGE-tags (with BR-tags inserted in the remaining table-data text).

To illustrate, the next example uses an HSPACE=20 (pixels) attribute in each table-data image-tag. The overall table has a <TABLE BORDER=2 CELLSPACING=10> surround.

Athena
Anubis
Ariel
Aphrodite
Baal
Bragi
Bubastis
Bigfoot
Cassiopeia
Cronus
Cupid
Ceres

In the second example (above), the HSPACE atribute created a gap to the left and right of each inline image.

Athena
Anubis
Ariel
Aphrodite
Baal
Bragi
Bubastis
Bigfoot
Cassiopeia
Cronus
Cupid
Ceres

In the third example (above), an ALIGN=left attribute was added to each image-tag, causing the text to reset itself to fill all of the space to the right of the image. In effect, the inline image is no longer set "in" a line of text, but "left" of several lines instead.

But overall, each image was too small to enable a uniform setting against all of the rows of associated text, which consequently wrapped itself around the base of each image. Adding (or substituting) a VSPACE attribute can overcome this problem.

In the next example, HSPACE=20 is changed to VSPACE=20:

Athena
Anubis
Ariel
Aphrodite
Baal
Bragi
Bubastis
Bigfoot
Cassiopeia
Cronus
Cupid
Ceres
Diana
Dyonysus
Demeter
Doctor Who
Ea
Elvis
Eros
Electra
Fatima
Flora
Freya
Frankenstein

The last example (above) used <IMG SRC="filename.gif" ALIGN=left VSPACE=20>. The actual value of VSPACE required will always depend on how many rows of text the table-data holds, and is best established by testing.

In conclusion, when accompanying broken (as opposed to wrap-around) text, a combination of IMAGE ALIGN=attribute and VSPACE(and/or HSPACE)=value is a useful means of avoiding tables-within-tables (which can otherwise increase the size and complexity of a file-document dramatically).