Home arrow JavaScript arrow Page 4 - Creating Table Rulers
JAVASCRIPT

Creating Table Rulers


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.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
August 27, 2009
TABLE OF CONTENTS:
  1. · Creating Table Rulers
  2. · Creating a table ruler: building a sample HTML table
  3. · Highlighting table rows with CSS and JavaScript
  4. · The table ruler's full source code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on building a table ruler</title>

<style type="text/css">

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;

}

</style>

<script language="javascript">

// example on implementing 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>

</head>

<body>

<h1>Example on building a table ruler</h1>

<table id="ruledtable">

<thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Last Name</th>

<th scope="col">Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Alejandro</td>

<td>Gervasio</td>

<td>alejandro@domain.com</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>john@domain.com</td>

</tr>

<tr>

<td>Susan</td>

<td>Norton</td>

<td>susan@domain.com</td>

</tr>

<tr>

<td>Marian</td>

<td>Wilson</td>

<td>marian@domain.com</td>

</tr>

<tr>

<td>Mary</td>

<td>Smith</td>

<td>mary@domain.com</td>

</tr>

<tr>

<td>Amanda</td>

<td>Bears</td>

<td>amanda@domain.com</td>

</tr>

<tr>

<td>Jodie</td>

<td>Foster</td>

<td>jodie@domain.com</td>

</tr>

<tr>

<td>Laura</td>

<td>Linney</td>

<td>laura@domain.com</td>

</tr>

<tr>

<td>Alice</td>

<td>Dern</td>

<td>alice@domain.com</td>

</tr>

<tr>

<td>Jennifer</td>

<td>Aniston</td>

<td>jennifer@domain.com</td>

</tr>

</tbody>

</table>

</body>

</html>


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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials