Yale C/AIM Web Style Guide

Contents

Page Design

Introduction

Graphic design 100

Balanced pages

Design grids for pages

Graphic safe areas

Page headers

Typography I

Typography II

Typefaces

Consistency

Basic Tables

Page length

Cross platform issues

Editorial style

Frames

Advanced tables

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 autemDuis 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

Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books. www.killersites.com
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.