Alignment Howto Align Form Buttons - Horizontally Buttons

Please Place Cursor On Above Buttons For Link Information

I f you viewed our source code and it still is a little unclear, no problem. We will make it as easy as 1 2 3.

B efore we get into the code, remember just one thing. Each button will be in a separate table sitting side by side within the <BODY> section of your document where you want it to be located. With the above example, this is clearly seen by our designation of border="1" within the code. To remove the border, just change the 1 to a "0" (zero). If you remove the border, it would look like the page you came from (with no boxes "aka border" around the buttons) for this tutorial.

T o clarify this a little more, each "Sub Table" will house a single form button and consider it as a separate page in itself. Inside that particular table, nothing else matters but what you place inside the specific table. In this case it will be a form button and nothing else.

N ow for the code. Remember that for each button, you will have one table. They are side by side and will not be on top of each other. Don't go overboard and attempt to have 20-30 buttons in a row. If you do, what would happen is you would have to scroll from side to side as long as you have buttons. It would also not look at all professional to say the least. See the below example.
[ Example ]

Complete Table For 3 Buttons
Side By Side Or Horizontal

<table border="1"cellpadding="4"
cellspacing="3">
<tr>

<td valign="top" align="left">

<p>Form Button Here</p>
</td>

<td valign="top" align="left">

<p>Form Button Here</p>
</td>

<td valign="top" align="left">

<p>Form Button Here</p>
</td>

</td>
</tr>
</table>

Howto Configure Code For More Buttons


For each part of the code that says "Form Button Here", you would replace that with the below code which is a complete form button configured to open in a new browser window. just reconfigure it to your link(s)

<!--- Start Copy For Form Button --->

<form method="submit" action="URL Address Here"target="_blank"title="Descriptive Text Here"><input type="submit" value="Link Name Here"></form>

<!--- End Copy For Form Button --->

For each new button you want add the below table code

<!-- Start New Table Code For Additional Button -->

<td valign="top" align="left">

<p>Form Button Here</p>
</td>

<!-- End New Table Code For Additional Button -->

And be sure to add the above bit of table code before the below closing table tags.

</td>
</tr>
</table>

The target="_blank" can be removed if you want the form button link to open in the same window as opposed to a new browser window.

title="Descriptive Text Here"     This tag is used just like an alt tag on an image. If you place your cursor on the button, you will get a descriptive message that you insert between the " ".

O n a few closing notes. Consider each little table as a separate entity or its own space. Whatever you put in the one (to coin a phrase) "Sub Table" so to speak, will stay within the confines of that sub table only. It will not invade the space of any other sub table within the complete realm of tables.

T he perfect example of this is to see the above two (2) side by side tables. The one on the left has the code and the one on the right has the instructions. The code (left side) was put in one sub table and the howto was put in the other sub table (right side). This is how we got both sides of information next to each other instead of one on top of another.

I n reference to the (title="Descriptive Text Here") tag. As you notice in our example at the top of the page. You place your cursor on any of the above form buttons*, you get a descriptive message telling you what we want you to know.

  • *    You will notice all our buttons are the same size. This is for uniformity. It looks more professional if the buttons are the same size with the descriptive tag on mouseover telling your guest a little about the link they are going to activate.
  • Remember, with form buttons, what you type in for the link name will be as long as the wording itself plus blank space on both sides.
  • As a suggestion, you can have a little caption telling your guests to
  • "Please Place Cursor On Above Buttons For Link Information"
  • Or something to that effect.

L ast, but not least is the closing of tags used inside the tables. Any tag you open, you must close at the end prior to the closing </table> tag.

  • With the use of a form button only within each "Sub Table" the way the above code sits at closing is fine. You did not use anything within the table.
  • </td>
    </tr>
    </table>
  • But if you use other formatting such as text (font) within the tables for example, you must also close the font tag.
  • </font>
    </td>
    </tr>
    </table>

I f you would like a copy of a complete working (no disabled buttons) table code with six (6) buttons included (Just as the top of the page), grab the below link and you are there.
 [ Complete Working Code ]

T hat should just about wrap it up on howto put form buttons in a row and not one on top of another. If you have any problems with this, feel free to contact us.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-