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="david@acme.com"
 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>

Acme > Products > Transfirbulation > MORONS Server	< Previous · Next >
About Us · Products · News · Support · Contact Us	Site Map · Help · Comments
©2000 Acme Computer Corp.

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.

Nov	DEC	Jan
	01
2007	2008	2009

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

To Table or not to Table?

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos