Navigation Links and Table Borders

Organizing your links

One way to organize your navigation links is to enclose them within a table. The sections of the table can resemble a button with some basic formatting, and it is fairly easy to control where the links display on your page.

Some experts suggest that your site navigation links should be located either across the top or on the left side. The page you are reading makes use of both locations. For our purposes, and to keep it simple, we'll just make a table with links across the top and just below the logo bar we've created.

There are really simple methods, like at the top of this page, which only use two horizontal rules, created by using <hr/> tags, with links simply separated by a vertical hash mark (|). Another way to organize your navigation links is with a table.

I'll show you how to create this by creating a table, since that is a little more involved. Remember that a table is formed from horizontal rows and vertical columns. So, to create a navigation bar across the top, we want to make a table that has one row, but will have a few columns. The number of columns, ultimately, would be determined by how many links we would want to display. Also, remember that we would begin the table with the <table> tag, add a row with the <tr> tag, and add columns with <td> tags. The code for our table would look like this:

                <table>

                    <tr>

                        <td>add a link here</td>
                        <td>add another link here</td>
                        <td>heck, add yet one more link in this spot</td>
                    
                    </tr>

                </table>
			

Let's simply copy the above code and paste it into the page we were working on. Note that we are placing this table right below the logo bar table so, logically, the code gets placed right below the closing </table> tag. We'll work on editing the actual links later, once we've created and saved a few more pages to link to. Now, the page code looks like this:

Added a table at the top for navigation

                <html>

                    <head>

                        <title>

                            Text Size and Position

                        </title>

                    </head>

                    <body bgcolor="BFE2F9">

                        <table bgcolor="808080" height="100" width="100%">
                            <tr>
                                <td>
                                    <h1>Here's our logo bar!</h1>
                                </td>
                            </tr>
                        </table>
                        
                        <table>
                            <tr>
                                <td>add a link here</td>
                                <td>add another link here</td>
                                <td>heck, add yet one more link in this spot</td>
                            </tr>
                        </table>

                        <h2>Header Sizes</h2>
                        <h3 align="center">Centered subheader</h3>
                        
                        <p>
                            This is an example of default text style and size for a paragraph using the P tag
                        </p>

                        <p align="right">
                            Just as with the header tags, I can shift the text by adding the ALIGN attribute 
to the P tag, making this paragraph appear to the right side of the page.
                        </p>

                    </body>

                </html>

			

Our page should now look like this

Table borders

Alright, I know... you're disappointed with the results. The "links we just created look all run together. How could this possibly be an effective way to do this? Well, I'll tell you. First, simply adding some borders to the table will outline each cell. From there, we can change the border's thickness and cell background colors to make it stand out a bit.

Add a border to navigation link table

Taking this one piece at a time, we'll begin by simply defining the border by adding an attribute to the <table> tag. We'll set the thickness, in pixels (higher number is thicker), then add a width attribute so the navigation bar isn't the full width of the page. Our attributes get placed, if you remember, within the opening element tag. It looks like this:

                <table border="2" width="400">
			

Let's add that to the page and see what happens. Keep in mind that you can play around with the width of the entire navigation menu bar simply by making the WIDTH attribute number larger or smaller. You could also use percentages, but defining it in pixels gives you more control over how the bar is displayed.

Okay, what about changing the background color? Right! We simply add yet another attribute to the opening <table> tag, right along with the others we already added. Take special note of the spacing between each attribute and the quotes around each attribute's value.

Navigation now has white background

I won't do anything incredibly fancy here. I'll simply make the table's background white with a hexidecimal code (go to my Links page to find a nice hexidecimal color selector). The code for white is #FFFFFF (or a simpler version is just #FFF). So, now our opening <table> tag will look like this:

                <table border="2" width="400" bgcolor="#FFFFFF">
			
Look at the navigation bar now!

Creating the actual links

I know we've already covered a lot, but let's do one last thing to "finish" our page for today. I'd like to add some actual links to replace the filler text I put in the navigation bar. You would put in the correct Web addresses for specific pages, but I'll just use links to the other example pages I've already created. This is how it works.

First, begin with the tag that creates the link, <a href="Insert a web address here.com">Put a link description here</a>

When you create a link to another page, some suggest using another attribute so that viewers can easily get back to the source page. This option opens a new window so that, when it is closed after viewing it, the user still has your original page open and hasn't lost it. I've read there is some controversy over whether people like this or hate it, so I'll simply advise that you might want to use it sparingly. You add the TARGET attribute with "blank" as the value to open the page in a new window. If you don't need this option, simply don't include the attribute at all. Here's what my link would then look like:

                <a href="http://www.alanwilcox.net/html1.htm" target="blank">Example 1</a>
			

If we add this to the page, right in each cell defined by the <td> tag, our code now looks like this (note I have also added the ALIGN attribute with the value of "center" to center each link in each cell):

Real links added to navigation table
                <html>
                
                    <head>
                    
                        <title>

                            Background color on navigation table

                        </title>

                    </head>

                    <body bgcolor="BFE2F9">

                        <table bgcolor="808080" height="100" width="100%">
                            <tr>
                                <td>
                                    <h1>Here's our logo bar!</h1>
                                </td>
                            </tr>
                        </table>

                        <table  border="2" width="400" bgcolor="#FFFFFF">
                            <tr>
                                <td align="center"><a href="http://www.alanwilcox.net/html2.htm">Example 2</a></td>
                                <td align="center"><a href="http://www.alanwilcox.net/html3.htm">Example 3</a></td>
                                <td align="center"><a href="http://www.alanwilcox.net/html4.htm">Example 4</a></td>
                            </tr>
                        </table>
                        
                        <h2>Header Sizes</h2>
                        <h3 align="center">Centered subheader</h3>
                        
                        <p>
                            This is an example of default text style and size for a paragraph using the P tag
                        </p>
                        
                        <p align="right">
                            Just as with the header tags, I can shift the text by adding the ALIGN attribute 
to the P tag, making this paragraph appear to the right side of the page.
                        </p>
                        
                    </body>
                </html>

			

Before you click on the following link, let me point out something else I added. When you open the link, one of the first things you may notice is that one of the links has a different background color. If you click the next link in the navigation bar, you will see that its "button" has a different background now. The same for the third button when you click to open that page. This is one of several ways to let your site visitors know what page they are on. Another way to highlight a page link would be to change the font style or color. Experiment a bit and see what you can come up with. If you want to see how I change the link characteristics for page highlighting, simply right click on the page and select View Source in IE or View Page Source in Firefox (you should be able to find a similar option in one of the many other browsers out there). Then, just find the links where I change the bgcolor to #666666.

Here's the page with links! :)

Tutorial 5; Adding Graphics and Images