Tricks and Treats

Used to make a sidebar.
This table can be used to highlight a special quote, hold navigational links, or set as a table within a table.


Insert a table within a table to highlight or as a design element.


All That Jazz

apinksax.gif (14913 bytes)

Pink Panther



Tables don't have to take up the entire page.  Use percentages to control the width.   See Middleboro.

Be careful about using absolute pixels.  Don't force people to scroll sideways.   Peoples screen resolutions and sizes vary.  Percentages let things move with the screen size. 

Use tables to separate a busy background from the text.  See Arboretum Swim Club.

Use tables to organize a page's sections.  See WayNet.

Be aware that computerized "readers" for the blind have difficulty with tables.  If your audience includes the visually handicapped - you may want to stay away from tables.

Control the Space Around Your Graphics
You can control the spacing around your graphics by using hspace (horizontal space) and vspace (vertical space).
1st bridge 1834 175.JPG (8363 bytes)This picture is not controlled at all.  Notice how the letters snuggle right up to the picture, and the left edge aligns with the left margin.

1st bridge 1834 175.JPG (8363 bytes)This picture includes the code
<img src="images/1st_bridge_1834_175.JPG" width="175" height="77" alt="1st bridge 1834 175.JPG (8363 bytes)" hspace="10" vspace="10"> that includes 10 extra pixels horizontally and vertically on each side of the graphic.  Notice the extra space between the letters and the bottom of the picture.

Control Space with a 1 Pixel Transparent Graphic
You can also control spaces by creating a 1 pixel X 1 pixel transparent graphic. Insert this graphic where you need space and set the size to however many pixels you need.   Occasionally a browser will show this upon loading, so test carefully when using this trick.

spacer80.gif (837 bytes)This sentence is indented with a 80 X 5 pixel transparent graphic that I created - because it's easier to "grab" using a wysiwyg program.

Pre-Loading Graphics
If one of your early pages contains lots of interesting  content that will hold your audience's interest, you may load a large graphic at the bottom of that page as a 1 X 1 pixel image.  It will then cache on the visitor's drive & be ready to open immediately when they move to the next page.

Code Example:

<img scr="viewevent.gif" width="1" height="1">

Specifiying Multiple Fonts
You can't guarantee that a specific font will be installed on a viewer's system, but you can specifiy what typeface is used if it is there.  Use the code

<font face="arial, geneva, verdana">

(or which ever font you prefer used that you are pretty sure exists on most Windows and Mac systems).  The browser will look for the fonts in the order they are listed.


Normally use anti-aliasing on type to smooth the "jaggies".   It adds extra colored pixels to smooth out the edges.

anti-aliased.GIF (1736 bytes)Smoother, softer look
  non anti-aliased.gif (889 bytes)Jaggies - but often easier to read in very small type

Specialty Sites

Reduce your graphics without a great deal of software or headbashing by using GIF Wizard  to reduce the size of your graphics. 


Return to Index.