So, You Want To Line Up Link Buttons, Huh?

Use these to jump around or read it all…

[Line ‘Em Up!]
[What Does It]

[What’s Happening]
[Ups and Downs]

[Can I Get A Picture On The Button?]

     “Yes, Joe. We’ve wanted to line up many different link buttons for a while now!”

     Yeah, you’re right. The old link button tutorial wasn’t overly helpful and many of you found that just throwing a bunch of links on the same page wouldn’t work real well. They all went to the same place. Now the answer has come, and I’m going to give it to you!

---

     In order to get the link buttons to line up and to have them all point at different places you need to separate the buttons. You have to make it so the other buttons don’t know that other buttons are around on the same page. Sounds real covert, huh? It’s a rather simple process, but it does get a bit involved. You separate the buttons using table commands. Read all about tables at your local library or visit my tutorial So, You Want A Table,
Huh?. It’s good reading.

Line ‘Em Up!

     

Is this maybe what you

’

ve been looking for?

     Click on the buttons above. They all work and they all go to different pages.

What Does It

     

Why, this does it

–

now that you

’

ve asked:

<TABLE BORDER=”0″>

<TR>

<TD><FORM METHOD=”LINK” ACTION=”index.html”>

<INPUT TYPE=”submit” VALUE=”HTML Goodies Domain Page”>

</FORM></TD>

<TD><FORM METHOD=”LINK” ACTION=”http://espn.go.com”>

<INPUT TYPE=”submit” VALUE=”ESPN”>

</FORM></TD>

<TD><FORM METHOD=”LINK” ACTION=”http://www.cnn.com”>

<INPUT TYPE=”submit” VALUE=”CNN News”>

</FORM></TD>

</TR>

</TABLE>

What’s Happening

     

You

’

ll understand this a whole lot better if you first read the tutorial on

Tables

. It

’

ll help a great deal. But I digress

…

.

• TABLE BORDER=”0″ tells the browser a table format will go here. The border=”0″ part is just telling the browser to place no defining lines around the cells you create.
  
• TD stands for Table Data. It denotes the information that will go in the table. In this case, the data will be a form button.
  
• FORM through /FORM is the form button explained in the Form Button tutorial.
  
• /Table wraps up the whole deal.
  

Ups and Downs

     

A couple of additions and you get the buttons lined up and down:

Here’s what did it.


Notice I just added a couple of <TR> and ALIGN=center commands. The ALIGN=center command is just my preference. You don’t need it for them to be up and down. They will just line up left-aligned without it.

<TABLE BORDER=”0″>


<TR>

<TD ALIGN=center><FORM METHOD=”LINK” ACTION=”/”>

<INPUT TYPE=”submit” VALUE=”HTML Goodies”>

</FORM></TD>


</TR>

<TR>


<TD ALIGN=center><FORM METHOD=”LINK” ACTION=”http://espn.go.com”>

<INPUT TYPE=”submit” VALUE=”ESPN”>

</FORM></TD>


</TR>

<TR>


<TD ALIGN=center><FORM METHOD=”LINK” ACTION=”http://www.perrier.com”>

<INPUT TYPE=”submit” VALUE=”Perrier Home Page”>

</FORM></TD>


</TR>


</TABLE>

      You can line the buttons up in just about any order allowed by the table commands. How they line up is not the real use of the table cells, although it helps a good deal. The real use of the table commands is to separate the buttons so they work apart from each other. Just enter the button’s commands as table data.

Can I Get A Picture on the Buttons?

     

No, I

’

m sorry to say. Not these buttons, at least. They are text-based and the image is created by the browser instead of being placed there as an image. Entering an image command or an image name simply shows up as the text you entered. Try it.

 

[Line ‘Em Up!]
[What Does It]

[What’s Happening]
[Ups and Downs]

[Can I Get A Picture On The Button?]