Creating JavaScript-Based Table Rulers

Introduction

Undeniably, a table ruler is one of the handiest mechanisms that can be used on a web site to increase the usability of HTML tables that contain numerous items. It permits users to highlight visually (generally by means of a rollover effect) the row that they are currently viewing.

Naturally, this technique helps to prevent users from getting lost when reading data in large tables. It can be implemented in a great variety of ways, ranging from using CSS and JavaScript separately, to utilizing a balanced combination of them, particularly where it’s necessary to address certain browser incompatibilities.

So, if you’re a web designer who’s seeking an approachable guide on how to build a table ruler by using a combination of CSS and JavaScript, you've come to the right place. First I will review the ground we covered in the previous article, and then we'll go over some new methods for creating a table ruler. 

In the preceding article of the series, I demonstrated how to create a simple table ruler by utilizing a mixture of CSS and JavaScript. This combination will work correctly with many modern browsers. In simple terms, this table ruler was capable of changing the background color of each row within a selected HTML table. This happened every time a user placed the mouse over each row, in this manner increasing the table’s overall readability.

As I said earlier, it’s possible to use different approaches to construct a table builder like the one described above. Therefore, in this second tutorial I’ll be explaining how to build this handy mechanism by means of unobtrusive JavaScript, which will function with most popular browsers as well.

Now, it’s time to see how this JavaScript-based table ruler can be created in a few simple steps. Let’s get started!