Making Table Rulers Work with Multiple Tables

Introduction

Despite its seeming simplicity, building a table ruler can be a challenging task, particularly for inexperienced web designers taking their first steps into the huge terrain of professional web development.

So, if you’re a newcomer who wishes to learn how to create a table ruler by using different approaches, or simply a seasoned designer who wants to fill some gaps that you might have regarding this topic, then in this group of articles you’ll find a comprehensive guide that will lead you through building this popular web application, using a combination of CSS and JavaScript.

And now that I mentioned “articles,” you’ll surely recall that in the last one I explained how to construct a simple table ruler that only relied on JavaScript to highlight the rows of a targeted HTML table. Indeed, this small JavaScript program was built by means of an unobtrusive approach, meaning that its functionality could be easily extended, without having to modify its structural markup.

Now that you have recalled the topics that were treated in the previous article, it’s time to talk about the concepts that I plan to deploy in the next few lines. In this third tutorial I’m going to demonstrate how to build a table ruler that can be used with multiple HTML tables, thus largely extending its existing functionality.

In this particular case, this brand new table ruler will use JavaScript as its workhorse to target several HTML tables at the same time, but as you’ll see in a moment, the way this application will function will be really easy to grasp.

Now, it’s time to start learning how to create a table ruler capable of working with multiple tables. Let’s jump in!