HTML - designing stage of web page

[alex_read]

<TABLE>
<TR><INPUT NAME="About" TYPE="Button" VALUE="ABOUT ME" </TR>
<TR><INPUT NAME="Mail" TYPE="Button" VALUE="MAIL ME" </TR>
<TR><INPUT NAME="Program" TYPE="Button" VALUE="PROGRAMMING" </TR>
<TR><INPUT NAME="Joke" TYPE="Button" VALUE="JOKES" </TR>
<TR><INPUT NAME="Site" TYPE="Button" VALUE="OTHER SITES" </TR>
</TABLE>


is what I am working on - my first web page which will be for my home page. Don't all gasp in awe yet though! :D

What I would like is to know how to make these buttons the same size and align them, sort of "borrowing" the idea from : http://hjem.get2net.dk/vcoders/cm/

Has anyone any ideas on this please? will be greatly appriciated! Thank you :)

<TABLE>
<TR><INPUT NAME="About" TYPE="button" VALUE="ABOUT ME" style="HEIGHT: 24px; WIDTH: 149px" TR<>
<TR><INPUT NAME="Mail" TYPE="button" VALUE="MAIL ME" style="HEIGHT: 24px; WIDTH: 149px" TR<>
<TR><INPUT NAME="Program" TYPE="button" VALUE="PROGRAMMING" style="HEIGHT: 24px; WIDTH: 149px" TR<>
<TR><INPUT NAME="Joke" TYPE="button" VALUE="JOKES" style="HEIGHT: 24px; WIDTH: 149px" TR<>
<TR><INPUT NAME="Site" TYPE="button" VALUE="OTHER SITES" style="HEIGHT: 24px; WIDTH: 149px" TR<>
</TR>
</TABLE>

[monte96]

If your looking for how they did it, they have two external files to their page, a .js javascript file that contains functions that change the classname of the TD tags of the menu bar, and a .css stylesheet that contains all of the style classnames that describe the 3d look to the borders. It's a bit more complicated but is very fast to load and using no images for the transition effect.

A simpler but more server intensive way is to create two images one that is loaded on the page initially and another that is loaded on the onmouseover event and just switch between them onmouseover and onmouseout. The downside is the images will have to load and it will not act as snappy as the stylesheet solution.