 |

Contents

Page Design
|
 |

You can use tables in creative ways to help achieve effects that you may want to incorporate into your web-publishing efforts. There are a number of design challenges for which tables provide the solution.
One thing you can do with tables is take a composite image and split it into pieces, then re-combine it in the cells of table. This is useful for creating wrap-around effects or image captions. The following example is shown with borders off and borders on to illustrate how the table is formatted.

 |
 It is possible to approximate wrapping text around a graphic by splitting the image into two parts and combining the images and text in a table. |
 |

 |
 It is possible to approximate wrapping text around a graphic by splitting the image into two parts and combining the images and text in a table. |
 |

Watch out for hard returns in your HTML code when using tables to mortice images. A hard return before a </TD> tag will add space between the table cells. You will also need to set cellpadding, cellspacing, and border to 0 in order for the image to mortice correctly. And finally, be sure to use the single-pixel GIF to keep the cells in your tables from collapsing.

Alignment
You can use tables to combine different text alignment specifications. In this example the text in the left column is right justified, and the text in the left is left justified.

 Lorem ipsum |  |  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

|
Duis autem | | Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |


References
|
 |