Tutorial 27: The Care and Feeding of Hyperlinks, Part III - HTML with Style | 8

Tutorial 27: The Care and Feeding of Hyperlinks, Part III

To Table or not to Table?

One of the things you'll be interested in when designing your navigation bars is to cram as many links as possible in as small a space as possible. Although we've discussed various layout techniques using CSS in these tutorials, the truth is that with current browser implementations, you just can't beat a good old-fashioned HTML table for compact layouts. Although tables don't really offer many advantages when laying out entire pages, where borders and margins are required, when you're trying to fit tiny pieces of text into a compact structure, the problems caused by browser bugs usually become insurmountable when you're dealing with inline elements.

Hence, this is going to be one of the very few times I'm going to recommend you use a table for information that is not strictly tabulated data. Of course, this does not mean that you should drop CSS from the equation entirely, just that you should stick to a simple table for layout, and then style your links appropriately.

For example, let's take a look at a table that provides navigation for Acme's site:

<TABLE>
<TR>
<TD COLSPAN="3">
<A REL="Home" HREF="/"
 TITLE="Acme Computer Corporation Home">Acme</A> &gt;
<A REL="Section" HREF="/products/"
 TITLE="Acme Products">Products</A> &gt;
<A REL="Subsection" HREF="/products/transfirbulation/"
 TITLE="Acme Transfirbulation Software">Transfirbulation</A>
&gt; MORONS Server
</TD>
<TD STYLE="text-align:right;">
<A REL="Prev" HREF="./client"
 TITLE="MORONS Client Runtime">&lt; Previous</A> &#183;
<A REL="Next" HREF="./devel"
 TITLE="MORONS Developer's Kit">Next &gt;</A>
</TD>
</TR>
<TR>
<TD>
<SPAN STYLE="font-weight: bold">
<A REL="Bookmark" HREF="/about/"
 TITLE="About Acme Computer">About Us</A> &#183;
<A REL="Bookmark" HREF="/products/"
 TITLE="Acme Products">Products</A> &#183;
<A REL="Bookmark" HREF="/news/"
 TITLE="Acme News">News</A> &#183;
<A REL="Bookmark" HREF="/support/"
 TITLE="Acme Support">Support</A> &#183;
<A REL="Bookmark" HREF="/contact/"
 TITLE="Contacting Acme">Contact Us</A>
</SPAN>
</TD>
<TD COLSPAN="3" STYLE="text-align: right">
<A REL="Contents" HREF="/sitemap"
 TITLE="Acme.com Site Map">Site Map</A> &#183;
<A REL="Help" HREF="/help"
 TITLE="How to find things on Acme.com">Help</A> &#183;
<A REL="Author" HREF="[email protected]"
 TITLE="David Dothead, WebMaster">Comments</A>
</TD>
</TR>
<TR>
<TD COLSPAN="4" STYLE="text-align: right">
<A REL="Copyright" HREF="/legalese" TITLE="Copyright Statement"
 STYLE="font-size: 80%;">&copy;2000 Acme Computer Corp.</A>
</TD>
</TR>
</TABLE>

Notice how we've got the breadcrumbs at the top left, with the links to the next and previous pages in the series immediately to the left. Below this is a line linking directly to the major sections of the site, differentiated from minor "support" sections like the site map and copyright page. If this page was deeper within the site hierarchy, you might also want to add links to sections adjacent to the the current one.

Of course, given a little time and inspiration, you could probably make it look better than that, but the example serves to illustrate the concept of a navigation bar: A compact set of links to pages related to the current one, organized by type. Here we have an indication of the page's place in the site hierarchy, together with links to all pages upwards of this one, links to navigate through the series of documents this page is part of, links to the main sections of the site, and links to pages with information about the site.

Next Page...

https://www.internet.com/

URL: https://www.webreference.com/html/tutorial27/7.html

Produced by Stephanos Piperoglou
Created: October 31, 2000
Revised: November 1, 2000