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 - Creating a table ruler: building a sample HTML table (Page 2 of 4 )
The first example that I'm going to show you concerning the creation of a table ruler will use a simple combination of CSS and JavaScript. But, before I do that, it's necessary to create an HTML table with which to work.
Below I coded a sample (X)HTML file that will display on screen a basic HTML table, which has been populated with data on a few hypothetical users. Here's how the file in question looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As you can see, the above (X)HTML file is extremely simple to grasp. As I explained before, it builds a typical HTML table, which contains ten rows. In addition, here's a screen shot that shows pretty clearly how the table is rendered by a browser:
So far, nothing unexpected, right? At this point, I've built a sample HTML table that's been populated with data about some people, which should be very simple for you to understand. However, things will get much more interesting in the section to come, where I'm going to show you how to add a table ruler to the previous (X)HTML file.
Want to learn how this will be done? Then click on the link that appears below and keep reading.
JavaScript 
Creating JavaScript-Based Table Rulers
