Creating Table Rulers

In the last few years, HTML tables have acquired a bad name when it comes to building the layout of web pages. Many web designers consider them to be "evil things," while DIVs have gained remarkable popularity.

I don't intend here to contribute my two cents to the DIVs vs. TABLES debate, since this isn't the goal of this group of articles. However, there's a fact that can't be denied: sooner or later, you'll be faced with the need to use tables when developing a particular web site. And as you know, they're great for displaying tabular data.

Things can get complicated when it's necessary to build large tables that contain numerous rows. Suppose for a moment that your web site displays a catalog of different products, where each of these are shown using lengthy HTML tables. In this situation, it's possible that users start reading the heading items of your tables, and then at the halfway mark, simply get lost!

One of the most useful and simple approaches to avoid a problem like this consists of building a table ruler. This is a visual aid that highlights the table row that a user is currently reading. As with many other things relating to web development, there are several methods that can be employed to create a table ruler, ranging from CSS-based solutions to a combination of CSS and JavaScript.

Therefore, in this series of articles I'll be explaining how to build several table rulers by using different approaches. In this first article I'm going to start up showing you an introductory approach, based mostly on CSS and a pinch of JavaScript, and then, with this technique well underway, I'll be teaching you a few others that will rely completely on unobtrusive JavaScript.

Now, it's time to get rid of the preliminaries and begin learning how to create distinct table rulers in a few easy steps. Let's get started!