Welcome to the first part of a multi-part series on building a table ruler for your HTML tables. In this part, you'll learn what a table ruler is, why you might want one for your tables, and how to construct a simple one with CSS and JavaScript.
Creating Table Rulers - The table ruler's full source code (Page 4 of 4 )
As I stated in the previous section, below I've listed the full source code of this simple table ruler. You can introduce your own improvements into it if you choose:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Here you have it. That's all the source code that you'll need to get the table ruler working as expected in most modern browsers. But wait a minute! You still haven't seen how this highlighting effect really looks. Take a look at the following picture, which shows the table ruler in action. Here it is:
And to wrap up this introductory tutorial, feel free to tweak all the code samples shown before to acquire a more solid grounding in building a table ruler with CSS and JavaScript.
Final thoughts
In this first chapter of the series, I walked you through creating a simple table ruler by using a combination of CSS and JavaScript. As you saw before, the whole procedure was pretty straightforward, so I guess that you shouldn't have major problems improving its current functionality.
In the forthcoming article, I'll be explaining how to build a table ruler that only uses JavaScript to function correctly; it'll be displayed consistently by most modern browsers as well.
Don't miss the next part!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.