CoffeeCup - HTML Editor, Flash & Web Design Software

HTML Tables are a great tool for positioning text and images on your webpage. Don't you just love trying to keep tack of all those tags? Things get even worse when you start putting tables within tables within tables. Pretty soon the code gets so confusing, you don't know which way is up. With Style sheets, all the confusion goes away. Just define a style sheet to handle positioning of elements on the page.

Here is example. Say we have two images, one of Bo, and one of Luke, and we want to position these images on our on our page. Using style sheet maker, we can position the images by creating ID's for each image:

#Bo { margin-left: 200px; margin-top: 300px; }
#Luke { margin-left: 400px; margin-top: 300px; }

Now we can apply the styles to our image tags, like this:

<IMG ID="Bo" src="bo.jpg">
<IMG ID="Luke" src="luke.jpg">

Now the image bo.jpg will be placed on the page 200 pixels from the left side of the screen, and 300 pixels from the top side of the screen, while the image luke.jpg will be placed on the page 200 pixels from the left side of the screen, and 300 pixels from the top side of the screen.

This method of positioning is much easier than using tables, and more exact than using simple alignment tags.