20 Top HTML Tips

Donate
Volunteer
Merchandise
Downloads

Standard HTML

Here there is a <br> between each item in the menu, except there is a <p> between Join Us and Donate. You are restricted to only these 2 heights of spaces between items. 

This code uses 931 bytes.

Green Office

Events

Local Groups

Contacts

Join Us

Donate

Volunteer

Merchandise

Downloads

Spacer image trick

If you want a spacing that is between these 2, then you need to use transparent spacer images. Here the height of the spacer image is varies from 2 to 14 pixels, but it can be whatever you want.

<img src="images/blank.gif" height=5 alt="">

This code uses 1321 bytes (the size could be reduced by making the name of the images dir and the blank image shorter).

HTML table spacing

For comparison here is the way of controlling height using a table. Here all the spaces must be exactly the same since they are controlled by the cellpadding and cellspacing of the table. Note that this also adds the same amount of horizontal space which the blank image trick doesn't.

This code uses 1301 bytes.

Here, we have
a circular layout,
acheived through
five single-pixel
transparent gifs.

<img src="images/blank.gif" width=45 alt="">

A normal paragraph.

This paragraph uses a single-pixel GIF with align=left and height=45 to create a hanging paragraph.

A normal paragraph.

<img src="images/blank.gif" height=45 hspace=10 align=left alt="">

A normal paragraph.

This paragraph uses the text-indent property to create the indent at the beginning. Note that it only works with a correct <p> paragraph </p>

A normal paragraph.

A normal paragraph.

This paragraph uses the margin-left property to create a hanging paragraph. Note that it only works with a correct <p> paragraph </p>

A normal paragraph.

<style type="text/css">
<!--
.indent { margin-left: 10%}
-->
</style>

<p class="indent">Text</p>

<style type="text/css">
<!--
.hanging { margin-left: 10%}
-->
</style>

<p class="hanging">Text</p>

e.g. <img src="images/red.gif" width="80" height="23" hspace="5">

The single pixel GIFs range from only 35 to 48 bytes.

Your single pixel GIF can even be an animated GIF. The animated single pixel GIFs range from only 111 to 135 bytes.

e.g. <img src="images/ani-red-black.gif" width="17" height="42" hspace="5">

Can also get lines and blocks of colour with table background colours and CSS. Animations are not possible with these however.

This example uses the normal <hr> tag with size set to 1 and a color attribute.

<hr size=1 color="#993300">

This example uses the underline tag on the top line of text.

<u>text</u>

This example uses a single-pixel gif with width set to 200 and a vspace of 1. This offers much more control over vertical spacing.

<img src="images/black.gif" width=200 height=1 vspace=1 alt="">

This toolbox just uses one table with the border=1 and the bordercolor attribute of the table tag. It produces a thick coloured border in IE, but with an ugly grey bevel in Netscape.

This code uses 1539 bytes.

This toolbox just uses one table with the border=1 and the bordercolor and bordercolordark attributes of the table tag. It produces a thin coloured border (with holes) in IE, but with an ugly grey bevel in Netscape.

This code uses 1565 bytes.

This toolbox just uses one table with the border=1 and the bordercolor and bordercolorlight attributes of the table tag. It produces a thin coloured border (with holes) in IE, but with an ugly grey bevel in Netscape.

This code uses 1566 bytes.

This uses a table within a table. As you expect the outside table has the red colour and the inside table has a red top row and a white bottom row. This works in Netscape.

One common trick that a lot of sites do is to make the width of each of the tables exactly the same!!! I don't know why. This one here, both tables are set to 130 pixels wide.

This code uses 1820 bytes.

This also uses a table within a table. As you expect the outside table has the red colour and the inside table has a red top row and a white bottom row. This works in Netscape.

This one here, the outer table is set to 130 pixels and the inner one to 128 pixels wide and it doesn't seem to make any difference.

This code uses 1820 bytes.

It is also possible to produce borders with CSS.

This example uses the border property applied to the table tag. This does not work with Netscape. It is not supported in Dreamweaver.

Here is a normal table with borders turned on. This automatically borders between the cells, but the border is the ugly grey bevel.

Here is an interesting way of acheiving thin borders throughout a table. This is copied from the old nzoom.com site. This works in Netscape.

This is acheived by having the content in a table with cellspacing=1 which allows the background colour to show through. The background colour is added with another table.

Using CSS to get a border throughout a table is a little more tricky. If you simply add the border property to the table and the cells you get ugly double borders.

The trick to avoid ugly double borders is to only add the border to 2 of the four possible sides. In this example the border is added to the bottom and left side of every <td>.

It is also necessary to add a border to the overall table as well - this also needs to be applied to only two sides, but it needs to be the opposite two sides. In this example the border is added to the top and right of the <table>.