Creating Table Rulers

In a standards-compliant world, building a table ruler would be a very simple process. It would only require attaching a "hover" CSS pseudo-class to all of the rows of the targeted table, to highlight a particular row each time the mouse is placed over it.

Unfortunately, Internet Explorer 6 and below support using CSS hovers only with hyperlinks (although this issue has been fixed up in IE 7). Therefore, to build a cross-browser table ruler it is necessary to use some CSS styles and a bit of JavaScript, so it can work correctly with IE also.

Considering this incompatibility, the CSS code that builds a table ruler with a more standard-compliant browser, like Mozilla Firefox, would look like this:

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 20pt Arial, Helvetica, sans-serif;

color:#000;

}

table{

width: 60%;

border: 1px solid #000;

border-collapse: collapse;

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

}

th{

background: #9cf;

}

th,td{

border: 1px solid #000;

border-collapse:collapse;

padding: 2px;

}

#ruledtable tr:hover,#ruledtable .ruler{

background: #fc0;

}

As you can see, the above group of CSS styles create a table ruler that will work with most standard-compliant browsers. In this case, the portion of code that builds it is only this one:

#ruledtable tr:hover{

background: #fc0;

}

However, as I said before, IE 6 and below only support adding "hover" CSS pseudo classes to hyperlinks, thus to implement the previous table ruler in a cross-browser fashion, it's necessary to add a "ruler" CSS class to all the rows of the targeted table, and then highlight them via JavaScript, as shown below:

<script language="javascript">

// example on building a table ruler with one table

function displayTableRuler(){

// get ruled table

var table=document.getElementById('ruledtable');

if(!table){return};

// get all <tr> elements of ruled table

var trs=table.getElementsByTagName('tr');

// loop over <tr> elements of ruled table

for(var i=0;i<trs.length;i++){

// display table ruler

trs[i].onmouseover=function(){

this.className='ruler';

}

// remove table ruler

trs[i].onmouseout=function(){

this.className='';

}

}

}

// display table ruler when the web page has been loaded

window.onload=function(){

if(document.getElementById&&document.
getElementsByTagName&&document.createElement){

// display table ruler

displayTableRuler();

}

}

</script>

Basically, all that the above JavaScript snippet does is apply a rollover effect to each row of the targeted table, in this way building a table ruler that will work with Internet Explorer 6 and below as well.

At this point, you've hopefully grasped the logic that stands behind creating a simple table ruler that will function with most modern browsers. As you saw a few lines above, this process only required combining some basic CSS styles along with a pinch of JavaScript. That's all.

Nonetheless, the previous code sample would be rather incomplete if it was not linked to the targeted table. Therefore, in the last section I'll be showing you the complete source code of the table ruler, including the corresponding structural markup along with the CSS styles and JavaScript code that you learned before.

Please visit the following section and keep reading.