Editing Your Free Calculator Form
You can modify the look and feel of any of the calculators you copy from this site, provided you don't alter the links or link text and otherwise agree to the RESTRICTIONS terms in the column at the right.
There are two good ways to format the calculator forms -- using tables, or using style sheets. Each approach is described quite briefly below:
Using Tables
A table lets you control the calculator's width, border, and backgroud color. (You can also control text size and font with one added HTML tag which we'll cover shortly.) Just paste the unformatted version of the calculator form onto your web page, and wrap it in a simple HTML table. Here is one typical example:
<table width="300" border="1" bordercolor="#cc3366" bgcolor="#ff9999" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
[your calculator goes here]
</td>
</tr>
</table>
| [your calculator goes here] |
Note the effect of the simple commands in the <table> tag which let you can control the appearance of your calculator:
- Width: You can specify width as either an absolute number of screen pixels ("300", e.g.), or as a percentage of the browser window's width ("50%", e.g.). If you use a percentage, the width of your calculator will change as you use your mouse to resize your browser.
- Border: This number specifies the width (in pixels) of the border around the table enclosing your calculator form. A width of zero tells the browser to show no border at all.
- Bordercolor: The color of the table border. HTML colors are indicated by a "#" symbol followed by 6 hexadecimal numbers -- you can just pick a color you want from this handy page and it will tell you the hexadecimal number to use. (Of course unless you have a non-zero Border number specified, you won't get a border of any color.)
- Bgcolor: The color of the calculator's background. (Use the same sort of color numbers you do for the Bordercolor, above; just pick a color that goes nicely with your web page.) If you don't specify a color, most browsers will show a plain white background.
- Cellpadding: The amount of space, in pixels, between the table border and your calculator. The higher the number, the more "whitespace" you provide.
- Align: Where on the page, horizontally, the calculator table should be placed. Values can be "left", "center", or "right". If you don't specify one of these, browsers will assume "left" alignment.
To control the appearance of the text of your calculator in a table, use the <font> tag right around your calculator (inside the <td> tag in the table). Here's an example:
<td>
<font face="courier, serif" color="#333399"
[your calculator goes here]
</font>
</td>
results in:
| [your calculator goes here] |
Finally, to align your calculator inside the table, add a command inside the <td> tag; for example:
<td align="center">
centers your calculator like this:
| [your calculator goes here] |
Using Style Sheets
Style sheets are another way to format HTML, different than using tables. Generally style sheets are for people more familiar with HTML, so we won't try to offer a style sheet tutorial here. We will advise that if you want to use style sheets that you start with one of the formatted calculator versions and then modify the existing style sheet commands that we start you with.